浮動並清除此div佈局

我有兩個菜單浮動到頁面的左側。然後我有一個浮動到右側的自動高度，調整到頁面上的內容（菜單結果）。浮動並清除此div佈局

在我的例子我將把UL的作爲div的，因爲它們被設置反正塊元素：

這些元素

<body> 
    <div class="container"> 
     <div class="div1_head"></div> 
     <div class="div1"></div> 
     <div class="div2_head"></div> 
     <div class="div2"></div> 
     <div class="div3_head"></div> 
     <div class="div3"></div> 
    </div> 
</body>

每個人都有一個單獨的div標頭去在他們之上。

我找不出正確的方法（如果有的話）來清除和浮動div，以便它們都將被對齊到正確的行中。

margin:0; 
padding:0; 
.container { 
    width:100%; 
    float:left; 
    height:500px; 
    background:#ebebeb; 
} 
.div1_head { 
    float:left; 
    background: #cfcfcf; 
    width:20%; 
    height:50px; 
    margin: 24px 0 0 0; 
} 
.div1 { 
    float:left; 
    background: #dedede; 
    width:20%; 
    height:200px; 
    clear:left 
} 
.div2_head { 
    float:left; 
    background: #cfcfcf; 
    width:20%; 
    height:50px; 
    clear:left; 
    margin: 24px 0 0 0; 
} 
.div2 { 
    float:left; 
    background: #dedede; 
    width:20%; 
    height:200px; 
    clear:left 
} 
.div3_head { 
    float:right; 
    background: #cfcfcf; 
    width:76%; 
    height:50px; 
    clear:none; 
    margin: 0 0 0 4%; 
} 
.div3 { 
    float:right; 
    background: #dedede; 
    width:76%; 
    height:200px; 
    clear:none; 
    margin: 0 0 0 4%; 
}

對於Web應用程序的性質，我使用嵌套的div和頭到一個更大的容器div不是一個選項。

這裏是一個的jsfiddle：http://jsfiddle.net/Kq49s/1/

來源

2013-05-28 Joe_Maker

你問什麼需要嵌套。你的「Web應用程序」不允許它的事實只會讓事情變得複雜。處理你想要實現的正確方法是將每列包裝到它自己的浮動容器中。 – Axel

Arg我很害怕這一點，嵌套目前正在實施到我正在使用的網絡應用程序，所以我現在只需要暫緩。 –

好吧，如果你不想在新的DIV添加到您當前使用的應用。

試圖改變自己的DIV3的CSS像這樣...

這裏是的jsfiddle演示...... http://jsfiddle.net/NTX6h/

.div3_head { 
    position:absolute; 
    top:24px;  /* same as your .div1_head's margin top */ 
    right:10px; /* if you want to add some right margin */ 
    background: #cfcfcf; 
    width:76%; 
    height:50px; 
} 
.div3 { 
    position:absolute; 
    top:74px;  /* .div3_head's margin top + .div3_head's height */ 
    right:10px; /* if you want to add some right margin */ 
    background: #dedede; 
    width:76%; 
    height:200px; 
}

來源

2013-05-29 02:21:16 yeyene

啊，這應該暫時工作，我非常固執地使用絕對定位，但至少我可以讓它看起來現在正確。 –

浮動並清除此div佈局

回答

相關問題