css - 使用 CSS 进行布局，清除 float 以在下一行开始 ??需要创建一个2列5行的布局

Question

我使用 DIV 而不是表格创建了布局。它似乎在工作......我必须在每个包含列和内容的 div 之后清除:无。

但在其他 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>

Answer 1

这是一个可以解决所有问题的 CSS 类。

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