html - 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/ .