使用CSS進行佈局，清除浮動以顯示下一行？需要創建2列和5列的佈局

我已經創建了一個使用DIV而不是表格的佈局。它似乎正在工作......我必須清楚：在每個div由列和內容組成之後都沒有。使用CSS進行佈局，清除浮動以顯示下一行？需要創建2列和5列的佈局

但是，我最終在每個2列下面有一行額外的行，然後再開始其他2列。我將代碼放在下面，我做錯了什麼？..我想要做的是創建一個類似於佈局的表格，但使用由5行構成的div並且每行都有2列。

<div id="column1" style="float:left;width:200px;">1st Title</div> 
<div id="container1" style="float:left;"> <asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList></div> 
<div style="clear:both;"></div> 
<div id="column2" style="float:left;width:200px;">2nd Title</div> 
<div id="container2" style="float:left;"> <asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList></div> 
<div style="clear:both;"></div>

來源

2010-12-21 Martin

這是一個CSS類，它會讓問題全部消失。

.clearfix:after { 
    content: "."; 
    display: block; 
    height: 0px; 
    clear: both; 
    visibility: hidden; 
}

來源

2010-12-21 09:54:39 Tebo

Yay clearfix。我仍然認爲這不應該是必要的（雖然我用了很多）:)（+1） – 2010-12-21 10:00:44

感謝您的幫助。 – Martin 2010-12-27 09:26:38

我敢肯定，你可以通過添加clear: left您columndiv S和clear: right您containerdiv小號獲得同樣的效果。

編輯：事實上，我認爲column中的clear:left就足夠了，但如果這是真的，那麼使用浮點數來製作類似表格的佈局將非常簡單，而且它永遠不會。

來源

2010-12-21 09:48:12

爲什麼不使用display屬性而不是float例如，（你需要將你的div分組在div類內的「row」）：

.row { 
    display: table-row; 
} 

#column1, #container1, #column2, #container2 { 
    display: table-cell; 
}

來源

2010-12-21 09:52:11 nawre

這不適用於IE <= 7.請參閱http://www.quirksmode.org/css/display.html – 2010-12-21 10:00:07

使用CSS進行佈局，清除浮動以顯示下一行？需要創建2列和5列的佈局

回答

相關問題