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

How to ignore the margin inline blocks create with different heights?

我遇到一个问题,其中块堆叠 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;
}

输出:

注意: 这里不占用右上div.[=47创建的白色space =]

Expected/wanted 输出:

注:这确实利用了白色space。

我知道这可以使用 2 列,但我不想使用 2 列。因为我必须能够删除一些 div,而不会在列中包含不相等的内容。

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

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

请注意,项目将按列降序排列。

fiddle

通过向其添加第二个 class,使具有更多内容的 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