html - 如何通过对齐的列表项填充空白

我想对齐列表项，这样在不使用任何JavaScript插件（比如Masonry）的情况下，列表项之间就不会留下空白。元素按顺序排列并插入到列表中。
示例：JSBin
HTML格式：

<ul class="example-list">
  <li>1</li>
  <li class="three">3</li>
  <li>2</li>
</ul>

CSS:

.example-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 120px;
}

.example-list li {
  display: inline-block;
  background: red;
  padding: 20px;
  margin: 5px;
  color: #FFF;
}

.three {
  height: 100px;
}

从示例中：2应该填充它上面的空白区域。
提前谢谢。

最佳答案

可能的解决方案
https://jsfiddle.net/43ofd9co/
我们可以使用CSS列来创建效果。。。检查上面的链接。。。我创造了小提琴。

    div{
            -moz-column-count: 2;
            -moz-column-gap: 10px;
            -webkit-column-count: 2;
            -webkit-column-gap: 10px;
            column-count: 2;
            column-gap: 10px;
            width: 480px;
    }

    div a{
          display: inline-block;
          margin-bottom: 20px;
          width: 100%;
          border:2px solid #333;}

    .height{height:100px;}

HTML格式

<div>
<a href="#">Your Content goes here...</a>
<a href="#" class="height">Your Content goes here...</a>
<a href="#">Your Content goes here...</a>
<a href="#" class="height">Your Content goes here...</a>
<a href="#" class="height">Your Content goes here...</a>
<a href="#">Your Content goes here...</a>
<a href="#" class="height">Your Content goes here...</a>
<a href="#">Your Content goes here...</a>
</div>

请检查此项以供参考：http://sickdesigner.com/masonry-css-getting-awesome-with-css3/
注意：此解决方案在IE9及以下版本中不起作用。

关于html - 如何通过对齐的列表项填充空白，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32521945/