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

Question

我遇到的问题是，块堆栈为2，接下来的2个块从前2个块的末尾开始。如this JSFiddle demo。

所示

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

输出：

注意： 这不会占用右上角创建的空白区域。

预期/想要的输出：

注意： 这确实利用了空格。

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

Answer 1

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

Answer 2

您可以尝试使用column-count属性

请注意，这些项目将按列降序排序。

fiddle

Answer 3

通过向其添加第二个类，使具有更多内容的div向右浮动。

<强> HTML

<div class="inline right">
  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>

<强> CSS

.right {
  float: right;
}

fiddle