在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