0

我正在处理具有 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也有解决方案，例如将所有.column.left的元素合并到一个div中，.column.right也是如此，但CSS解决方案会更好。

谢谢！

4

1 回答 1

0

是否需要以非特定顺序来自不同列的 div？如果是这样，那么您无法通过纯 css 来完成它，因为需要将一些元素放在另一列的元素之上。请参阅使用 CSS 重新排序 DIV。

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

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

.right {
    margin-left: 100px;
}

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

于 2012-08-22T21:05:13.013 回答