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>

此外，我的目标是提供一个适用于死浏览器的解决方案，例如IE7。但是，我也希望看到仅在较新的浏览器中支持的解决方案，因为我认为可能会有一些有趣的解决方案。当然，有通过JS的解决方案，例如在一个div中合并所有.column.left的元素，对.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/。

CSS列 - 比列更多的元素

1 个答案: