CSS多个不同高度的左浮动元素排列在2列中

Question

这是空白的问题：我有多个float：left元素，需要将它们排列为2列，而且它们的高度都不同。

为了简化操作，我需要图片中的元素3紧接元素1之后。

我100％使用的是Plain，例如Vainilla CSS和AngularJS。我想避免使用任何JS模块，因为这些元素几乎永久地被加载和重新加载。最重要的是：100％需要避免使用Jquery。

重要更新：

无法使用float：left，float：right方式（如果孩子是偶数或奇数）：将 多个固定宽度/高度可变的框浮动到2列中

重要更新：

在某些情况下，我确实需要仅应用2个元素，一个在另一个的底部。所以我想将属性应用于元素1。

Answer 1

在列方向上使用css flex布局。您可以从CSSTricks中阅读非常好的说明：https ://css-tricks.com/snippets/css/a-guide-to-flexbox/

或对列css属性使用砌体方法：

#container {
    width: 100%;
    max-width: 700px;
    margin: 2em auto;
}
.cols {
    -moz-column-count:3;
    -moz-column-gap: 3%;
    -moz-column-width: 30%;
    -webkit-column-count:3;
    -webkit-column-gap: 3%;
    -webkit-column-width: 30%;
    column-count: 3;
    column-gap: 3%;
    column-width: 30%;
}
.box {
    margin-bottom: 20px;
}
.box.one {
    height: 200px;
    background-color: #d77575;
}
.box.two {
    height: 300px;
    background-color: #dcbc4c;
}
.box.three {
    background-color: #a3ca3b;
    height: 400px;
}
.box.four {
    background-color: #3daee3;
    height: 500px;
}
.box.five {
    background-color: #bb8ed8;
    height: 600px;
}
.box.six {
    background-color: #baafb1;
    height: 200px;
}

<div id="container" class="cols">
    <div class="box one"></div>
    <div class="box two"></div>
    <div class="box one"></div>
    <div class="box three"></div>
    <div class="box two"></div>
    <div class="box five"></div>
    <div class="box one"></div>
    <div class="box two"></div>
    <div class="box six"></div>
    <div class="box three"></div>
    <div class="box two"></div>
</div>