html - 按特定顺序显示列中的元素

Question

我有一些不同高度的元素，我需要按以下顺序在 2 列上对齐:

1,2
3,4
5,6

我需要 div“相互接触”，这意味着无论 #2 的大小如何，#1 的底部都应该接触到#3 的顶部。

到目前为止，我试过这样做:

HTML

<div class="block block--1">1</div>
<div class="block block--2">2</div>
<div class="block block--3">3</div>
<div class="block block--4">4</div>
<div class="block block--5">5</div>
<div class="block block--6">6</div>

CSS:

.block {
    display: inline-block;
    float: left;
    width: 50%;
}
.block:nth-child(odd) {
    clear: left;
}
.block--1 {
    background: red;
    height: 100px;
}
.block--2 {
    background: blue;
    height: 150px;
}
.block--3 {
    background: yellow;
    height: 200px;
}
.block--4 {
    background: green;
    height: 100px;
}
.block--5 {
    background: grey;
    height: 200px;
}
.block--6 {
    background: orange;
    height: 300px;
}

但这不起作用，因为 #3 没有触及 #1。你可以在这里看到它:http://jsfiddle.net/oynrv880/1/

我也尝试过使用 column-count 属性，但它显示元素顺序错误。

我该怎么做？

非常感谢!

Answer 1

在不修改 HTML 的情况下，最接近的可能是这样的:

可以让奇数左浮，偶数右浮，清空各自的边。

div {
    width: 50%;
    float: left;
    clear: left;
}
div:nth-child(even) {
    float: right;
    clear: right;
}

JSFiddle