CSS Divs定位

我試圖更好地理解CSS。有人能幫我解決這個問題嗎？我有以下HTML：CSS Divs定位

<div class="DivParent"> 
<div class="Div1"></div> 
<div class="Div2"></div> 
</div>

我需要來定位他們這個圖上，如圖所示： http://i150.photobucket.com/albums/s99/dc2000_bucket/divs_diagram.png

我寫了下面的CSS：

.DivParent 
{ 
    border: 1px solid #000000; 
    padding: 0; 
    margin: 0; 
} 
.Div1 
{ 
    border: 4px solid #FF0000; 
    padding: 0; 
    margin: 0; 
    float: left; 
} 
.Div2 
{ 
    border: 4px solid #00FF00; 
    padding: 0; 
    margin: 0 0 0 10px; 
    float: left; 
}

Div1構成應先水平伸展到對。 Div2不應該伸展。它可以被Div1推到右邊，直到Div2沒有更多的空間去往右邊。之後，Div1應該開始向下（或垂直）增長。

上述的工作，如果兩個Div不夠寬，但然後Div2只是被推到Div1下面。我如何始終將Div2保持在Div1右側？

來源

2011-11-03 ahmd0

你能做到這一點

給parent div固定width。使用overflow:hidden;遏制divs
變化floats在裏面divs到display:inline-block;
設置width在右側div

左側div

.DivParent{ 
    border: 1px solid #000000; 
    padding: 0; 
    margin: 0; 
    overflow:hidden; 
    width:550px; 
} 

.Div1{ 
    border: 4px solid #FF0000; 
    padding: 0; 
    margin: 0; 
    max-width:400px; 
    display:inline-block; 
} 

.Div2{ 
    border: 4px solid #00FF00; 
    padding: 0; 
    margin: 0 0 0 10px; 
    width:120px; 
    display:inline-block; 
    vertical-align:top; 
    height:100px; 
}

設置max-width例如：http://jsfiddle.net/P6SJq/

來源

2011-11-03 04:20:29

你的答案假設至少有一個固定的列寬，不知道這是他想要的。 –

是的，這與我想要的非常接近。看起來這兩個寬度必須在此解決方案中得到解決。有什麼方法不能硬編碼Div1和Div2的寬度？ – ahmd0

此外，IE7有內聯塊的問題，所以這也可能是一個問題。 –

浮動意味着..浮動。不固定。爲了防止div2在其中一個div下移動，必須是靜態的，可能是左邊的一個。但是，這意味着您必須正確地浮動div2（並將其放在div1之前）。那麼問題在於div2總是在右側，即使div1的內容很少。

我不認爲有可能做你想要的只給你的HTML。你將不得不使用一些容器div來防止包裝。

來源

2011-11-03 04:06:28

好了，我可以很容易地使用

修復它，但一切都結束了，一個人不應該使用表格來定位網絡....難道不是嗎？ – ahmd0

@ ahmd0 - 不，你不應該使用表格進行佈局。我沒有說你不能做你想做的，只是你可能需要修改一下html。另外，如果你能適應某些元素的固定尺寸，Jasons的答案可能會奏效。 –

您可以使用display:table屬性是這樣的：

.DivParent 
{ 
    border: 1px solid #000000; 
    padding: 0; 
    margin: 0; 
    display:table; 
    width:100%; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    box-sizing:border-box; 
} 
.Div1 
{ 
    border: 4px solid #FF0000; 
    padding: 0; 
    margin: 0; 
    display:table-cell; 
} 
.Div2 
{ 
    border: 4px solid #00FF00; 
    width:100px; 
    height:50px; 
}

入住這http://jsfiddle.net/XBZad/2/

編輯

入住這http://jsfiddle.net/bGvAg/2/

這是在每個瀏覽器的工作。

來源

2011-11-03 04:23:37 sandeep

'display：table'在很多老版本的瀏覽器中都不起作用，特別是IE6和IE7，並且在老版本的Chrome和FF中「奇怪地」運行。 –

是的，但它的工作，直到IE8 – sandeep

是的，感謝與舊版瀏覽器不兼容的增加...我們將不做IE瀏覽器，哈哈））） – ahmd0

結帳這個來源。這對你會有幫助！

.DivParent 
    { 
     border: 1px solid #000000; 
     padding: 0; 
     margin: 0; 
    overflow:hidden; 
    } 
    .Div1 
    { 
     border: 4px solid #FF0000; 
     padding: 0; 
     margin: 0; 
     float:left; 
     min-width:300px; 
     max-width:900px; 
     min-height:100px !important; 
     height:auto; 
     width:auto; 
    } 
    .Div2 
    { 
     border: 4px solid #00FF00; 
     width:150px; 
     height:50px; 
     float:left; 
    }

來源

2011-11-03 04:49:05 DaraSingh

相關問題

CSS Divs定位

回答

相關問題