html - 在 CSS 中创建一个 2 列布局

Question

我正在为一个小型网络模块开发界面，但遇到了一些 CSS 方面的问题。现在我有容器 DIV，然后是用于布置子部分的表。我将其中 3 个表向左浮动，将 3 个表向右浮动，到目前为止效果很好。

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

给每个表格加上“clear:left”和“clear:right”后，出现如下...

将 3 个左浮动表移动到代码顶部并从其他 3 个中删除“float:right/clear:right”后，除此之外它工作正常。

Answer 1

对于每个向左浮动，添加 clear:left，为每个向右浮动，添加 clear:right。

不过这取决于每个 float 容器的顺序。另一种选择是尝试保留一列中的一组 float (即左侧 float 或右侧 float )并从另一列中的其他 float 属性中删除 float 属性，以便它们环绕到 float 框的一侧。

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