CSS 列 - 元素多于列

Question

我正在处理具有 2 列的布局。但是，我在这样做时遇到了一些问题，因为我的模板非常复杂，而且我无法每列有一个 div。

例如，我可能有类似的东西：

<div class="column left">
  left column - part 1
</div>
<div class="column right">
  right column - part 1
</div>
<div class="column right">
  right column - part 2
</div>
<div class="column left">
  left column - part 2
</div>

我想做的是创建两列，宽度相同，它们之间没有空洞（垂直）。通常，完成以下操作不会有问题：

<div class="column left">
  left column - part 1
  left column - part 2
</div>
<div class="column right">
  right column - part 1
  right column - part 2
</div>

此外，我的目标是有一个可以在dead 浏览器（如 IE7）中运行的解决方案。但是，我还希望看到仅在较新的浏览器中受支持的解决方案，因为我认为可能会有一些有趣的解决方案。当然，也有通过 JS 的解决方案，例如将所有 .column.left 的元素合并到一个 div 中，与 .column.right 相同，但 CSS 解决方案会更好。

谢谢！

Answer 1

是否要求不同列中的 div 没有特定的顺序？如果是这样，那么您无法通过纯 css 来完成它，因为需要将一些元素放在另一列的元素之上。见Use CSS to reorder DIVs。

如果这不是问题，请尝试在代码中将所有左列 div 写入右列 div 之前，并使用以下 css：

.left {
    float: left;
    width: 100px;
    clear: left;
}

.right {
    margin-left: 100px;
}

它创建了一个两列布局。当其中一列具有恒定宽度时，该方法特别有效，但是您可以通过将100px 更改为例如50% 来实现您想要的任何内容。此处示例：http://jsfiddle.net/uQwUT/。