如何忽略以不同高度创建的边距内联块？

Question

我有一个问题,其中块堆栈为2,接下来的2个块从前2个块的末尾开始.如此JSFiddle演示中所示.

HTML:

<div class="container">
  <div class="inline">
  A div with less content than that one >
  </div>
  <div class="inline">
  A div with more content than the one on the left. Now Inline 3 goes down to where this div ends. I want to move it up however, so it's right under the div that's above Inline 3.
  </div>
  <div class="inline">
  Inline 3
  </div>
  <div class="inline">
  Inline 4
  </div>
</div>

CSS:

.container {
  width:600px;
  background-color:rgb(40,40,40);
}

.inline {
  width:calc(50% - 22px);
  display:inline-block;
  vertical-align:top;
  color:white;
  background-color:#e74c3c;
  text-align:center;
  margin:5px 10px;
}

输出:

注意: 这不会占用右上角div创建的空白区域.

预期/想要的输出:

注意: 这确实利用了空格.

我知道这可以用2列,但我不想使用2列.因为我必须能够在列中没有不相等的内容的情况下删除一些div.

Answer 1

我在我创建的网站上遇到了同样的问题。我用砖石来解决这个问题： http: //masonry.desandro.com/