2个不同高度的div列布局，其中垂直间距始终相同？

Question

下图中的布局是否可以通过CSS实现？我有许多具有动态内容的div，因此具有不同的高度。

我需要一个2列布局。我需要div之间的垂直空间始终相等。

我已经将上述1到5的div标记为我希望它们出现在HTML中的顺序（如果可能）。但是下面的顺序将是我的第二选择。

Answer 1

使用vanilla CSS无法实现解决方案1，您需要使用Masonry或Isotope

等库

第二个可以使用CSS列实现（具有响应的额外好处，可以调整查看区域的大小），例如：

Demo Fiddle

HTML

<div class='cols'>
    <div class='item'>item 1</div>
    <div class='item'>item 2</div>
    <div class='item'>item 3</div>
    <div class='item'>item 4</div>
    <div class='item'>item 5</div>
    <div class='item'>item 6</div>
    <div class='item'>item 7</div>
</div>

CSS：

html, body {
    width:100%;
    margin:0;
    padding:0;
}
.cols {
    -webkit-column-width: 20em;
    -webkit-column-gap: 2em;
    -webkit-column-count: 2;
    -moz-column-width: 20em;
    -moz-column-gap: 2em;
    -moz-column-count: 2;
    -ms-column-width: 20em;
    -ms-column-gap: 2em;
    -ms-column-count: 2;
    column-width: 20em;
    column-gap: 2em;
    column-count: 2;
}
.item {
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    border:1px solid black;
    width:100%;
    height:200px;
    box-sizing:border-box;
}
.item:not(:first-of-type) {
    margin: 20px 0;
}

Answer 2

<强> Demo

CSS

body {
    font: 1em/1.67 'Open Sans', Arial, Sans-serif;
    margin: 0;
    background: #e9e9e9;
}


.container {
    margin: 1.5em;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
    font-size: .85em;
    -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
}

.panel {
    display: inline-block;
    background: #fff;
    padding: 1em;
    margin: 0 0 1.5em;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 2px 2px 4px 0 #ccc;
    text-align: center;
}
.panel1, .panel3  {
    background: #aaa;
    height: 100px;
}
.panel2, .panel4, .panel6  {
    background: #aaa;
    height: 200px;
}
.panel5, .panel7  {
    background: #aaa;
    height: 150px;
}

HTML

<div class="container">
   <div class="panel panel1">1</div>
   <div class="panel panel2">2</div>
   <div class="panel panel3">3</div>
   <div class="panel panel4">4</div>
   <div class="panel panel5">5</div>
   <div class="panel panel6">6</div>
   <div class="panel panel7">7</div>
</div>