如何強制div取消浮動

我通常使用表格進行佈局。但我想嘗試Div的佈局。這裏是問題，當我「浮動：離開」一個div時，它使隨後的div浮動。我試圖把「float：none」放到下一個div中，讓它打破一條線但它不起作用。如何強制div取消浮動

這是我想用表做：

<hr style="width: 100%;" /> 
<table> 
    <tr> 
    <td> 
     <div id="divLeftPane"> 
     ... 
     </div> 
    </td> 
    <td> 
     <div id="divCenterPane"> 
     ... 
     </div> 
    </td> 
    <td> 
     <div id="divRightPane"> 
     ... 
     </div> 
    </td> 
    </tr> 
</table> 
<hr style="width: 100%;" />

這是我迄今試圖與格使用浮動：

<hr style="width: 100%;" /> 
<div id="divContainer"> 
    <div id="divLeftPane" style="float: left;"> 
    ... 
    </div> 
    <div id="divCenterPane" style="float: left;"> 
    ... 
    </div> 
    <div id="divRightPane"> 
    ... 
    </div> 
</div> 
<hr style="width: 100%;" />

與使用DIV的問題是底部

也被漂浮在左邊。我試着把float：none放到最後一個div，HR標籤甚至divContainer。爲什麼最後一個小時是浮動的？

來源

2010-01-19 Nap

這會給你想要的效果：

<hr style="width: 100%;" /> 
<div id="divContainer"> 
    <div id="divLeftPane" style="float: left;"> 
    ... 
    </div> 
    <div id="divCenterPane" style="float: left;"> 
    ... 
    </div> 
    <div id="divRightPane" style="float:left; "> 
    ... 
    </div> 
    <div style="clear: left;"></div> 
</div> 
<hr style="width: 100%;" />

浮動3個div的左會讓他們出現並排，但是你會發現，divContainer不走div標籤的高度，裏面。添加明確的div：left基本上解除了這一點。

編輯：避免內聯樣式，當你這樣做是真實的。

來源

2010-01-19 02:45:29 wsanville

使用屬性

明確：左;

在底部元件上。

來源

2010-01-19 02:22:20

加入

#divContainer { 
    overflow: hidden; 
}

將在年底

做到這一點沒有額外的div

來源

2011-01-12 21:15:37

如何強制div取消浮動

回答

相關問題