Html CSS列-元素多于列

我正在做一个有两列的布局。但是，由于我的模板非常复杂，并且我无法在每列中有一个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>

左栏-第1部分
右栏-第1部分
右栏-第2部分
左栏-第2部分

我想做的是创建两列，具有相同的宽度，并且它们之间（垂直）没有空孔。通常情况下，通过以下方式完成不会有问题：

<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>

左栏-第1部分
左栏-第2部分
右栏-第1部分
右栏-第2部分

此外，我的目标是有一个解决方案，它可以在死气沉沉的浏览器中工作，比如IE7。但是，我也希望看到只在较新的浏览器中支持的解决方案，因为我认为可能会有一些有趣的解决方案。当然，也有通过JS的解决方案，例如将所有.column.left的元素合并到一个div中，对于.column.right也是如此，但是CSS解决方案会更好

---

谢谢

是否需要将不同列中的div按非特定顺序排列？如果是这样的话，那么您就不能通过纯css来实现它，因为需要将一些元素放在另一列的元素之上。看

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

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

.right {
    margin-left: 100px;
}

---

它创建了一个两列布局。当其中一列if的宽度为contant宽度时，该方法尤其有效，但是您可以通过将

100px

更改为例如

50%

来实现任何您想要的结果。这里的例子：。

如果您告诉我们您迄今为止发现/尝试了什么CSS，并尽可能具体地回答您的问题（您遇到了什么特殊问题等），这会有所帮助。我尝试了一些经典的列布局方法，类似于Xilexio的答案。我也试着通过JS来实现它，这很有效，但不是我想要的解决方案。这就是我的想法。是的，一个要求是以任何顺序工作。不过，谢谢你的努力！