我如何在另一個div內部放置三個div（一個垂直和兩個水平）？

我在另一個更大的裏面有三個div層。事情是這樣的：我如何在另一個div內部放置三個div（一個垂直和兩個水平）？

Image http://dev.kgstiles.com/wp-content/uploads/2012/10/Stack.png

比方說，藍色部分是頁眉和頁腳。我目前擁有的是頂部黃色div旁邊的綠色，但綠色div的底部將第二個黃色div推下。我基本上有兩個div，彼此相鄰，然後在他們兩個之下一個div，但我想要更接近於圖片的東西。我可能會錯過什麼，可以把綠色的div放在兩個黃色的旁邊？

我正好張貼代碼，因爲有很多在每個格，但我有一樣的東西：

<div class="container" > 

<div id="greenDiv" style="float:right; padding-right:5%; padding-top:15px;"> 

</div> 
<div id="topYellow" style="dsiplay:block;"> 

<-- Content --> 
</div> 
<div id="bottomYellow" style="dsiplay:block; float:left;"> 

<-- Content --> 

</div>

究竟是什麼，我需要做的，讓綠色DIV從推下黃一跌？任何幫助將不勝感激！

來源

2012-10-09 Christian

我會避免使用浮動。如果綠色div有一個固定的寬度，你可以他們的風格是這樣的：

.container { 
    position: relative; /* or anything besides static */ 
} 

#greenDiv { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 100px; 
} 

#topYellow, #bottomYellow { 
    margin-right: 100px; /* Plus more if you want a gap */ 
}

從本質上講，這需要綠色的div出容器的「流」。黃色的div將簡單地放置在一個正常的流量，他們的邊緣阻止他們重疊綠色div。您也可以只浮動#greenDiv而不是#bottomYellow，而不是使用絕對定位。這樣做的好處是，如果#greenDiv比兩個黃色高，則在頁腳上執行clear: both應確保#greenDiv和頁腳不重疊。

來源

2012-10-09 02:34:13 Jacob

我覺得自己像個白癡。我嘗試了類似的東西，但沒有想到將容器的位置設置爲相對於容器的外部設置綠色格子...非常感謝！ – Christian

你可以將兩個黃色元素包裝起來，然後浮動該元素，而不是黃色的左邊，然後將綠色浮動到左邊。在關閉整個容器之前添加一個clearfix，然後BOOM！您的左邊是黃色元素，右邊是綠色，容器拉伸到高度更高的位置。

來源

2012-10-09 02:52:38

set all div float：right; 第一個綠色div; 或者：

<div class="container"> 
    <div id="letf_div" style="float:left"> 
    <div id="yelow1"></div> 
    <div id="yelow2"></div> 
    </div> 
    <div id="right_div" style="float:left"> 
    <div id="green"></div> 
    </div> 
</div>

來源

2012-10-09 09:22:42 allpnay

我如何在另一個div內部放置三個div（一個垂直和兩個水平）？

回答

相關問題