Question

我想对齐列表项，因此在不使用任何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应填写其上方的空白区域。

提前致谢。

Answer 1

可能的解决方案

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及以下版本中无效。

如何通过对齐的列表项填充空格

1 个答案: