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

Question

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

为了更容易，我需要图片中的元素3，就在元素1之后。当然要保持填充。

我100％使用Plain，让我们说Vainilla CSS和AngularJS。我想避免使用任何JS模块，因为几乎永久地加载和重新加载元素。 最重要：100％需要避免Jquery。

重要更新：

不能使用float：left，float：right approch（如果是偶数或奇数）： Float multiple fixed-width / varible-height boxes into 2 columns

重要更新：

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

Answer 1

使用带有列方向的css flex布局。 您可以从CSSTricks中读到一个非常好的解释：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;