javascript - 均衡垂直空间相同但高度不同的盒子

Question

我需要使用可变高度来平衡列表项的顶部。我还希望每个盒子彼此之间的空间相同，如下图所示:

以下是我的代码:

HTML:

<div class="wrapper">
    <ul class="content">
        <li class="item">1 test test test test test test</li>
        <li class="item">2 test test test test test test test test test</li>
        <li class="item">3 test test test test test test test test test test test test</li>
        <li class="item">4 test test test test test test</li>
        <li class="item">5 test test test test test test test test test test test test test test test</li>
    </ul>
</div>

CSS:

.wrapper {
    padding: 0px
}
.content {
    width:100%;
}
.item {
    background:blue;
    color:white;
    padding:30px;
    width:100px;
    list-style:none;
    display:inline-block;
    top:0;
}

这是我的 fiddle需要你的帮助来解决它。

Answer 1

如果我理解正确，请申请

vertical-align:top;

对于 .item 的。

(top 对静态定位元素没有影响)

Updated Fiddle

更新:

如果你想让盒子之间的垂直间距相等，你可以使用css3 flex box如下所示(盒子的顺序会有所不同):

.content {
 display:flex;
 flex-flow: column wrap;
 width:100%;
 max-height:100%;
}

Demo

如果你想保持图片中显示的顺序，那么你可能需要依赖像 masonry 这样的插件。