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

This question already has answers here:

How to Create Grid/Tile View? [duplicate]

(8个答案)


5年前关闭。




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

输出:



注意:不会占用右上 Angular div创建的空白。

预期/需要的输出:



注意:确实使用了空格。

我知道有2列是可能的，但是我不想使用2列。因为我必须能够删除某些div，而各列中的内容不要相等。

最佳答案

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

关于html - 如何忽略以不同高度创建的边距内联块？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34307387/