在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。

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

编辑：一个工作示例： http : //cssdesk.com/Xan5j