在CSS中创建2列布局

Question

我正在研究一个小型Web模块的界面，并且我遇到了一些CSS问题。现在我有容器DIV，然后表格来布局子部分。我正在浮动3个左边的桌子和3个右边的桌子，直到现在它已经很好了。

我最近添加了一项功能，允许用户根据需要添加其他字段，并且随着右列中表格的高度增加，它会破坏布局。有没有更好的方法来做到这一点，以便布局不会破坏？

在每张表中添加“clear：left”和“clear：right”后，显示如下......

将3个左浮动表移动到代码顶部并从其他3移除“float：right / clear：right”后，除此之外它运行良好。

Answer 1

最好显示一个这样的实例，但处理这个的最简单方法 - 如果这是一个选项 - 是将每一列包装在它自己的div中。

Answer 2

对于每个浮动左边，添加clear：left，对于每个浮动右边，添加clear：right。

它取决于每个浮动容器的顺序。另一种选择是尝试从一列中保留一组浮点数（即浮动左侧或浮动权限），并从另一列中的其他列中移除浮动属性，以便它们包裹到浮动框的一侧。

编辑：一个有效的例子：http://cssdesk.com/Xan5j