使盒子在垂直但不同的高度上具有相同的空间均衡

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

你想做这个吗？ http://jsfiddle.net/BuaC3/

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

Answer 2

如果我理解正确，请申请

vertical-align:top;

适用于.item。

（ top对静态定位的元素没有影响）

Updated Fiddle

<强>更新：

如果您希望框之间的垂直空间相等，则可以使用css3 flex box，如下所示（虽然，但框的顺序会有所不同）：

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

Demo

如果您想完全按照图片中显示的顺序保留订单，那么您可能需要依赖masonry等插件

Answer 3

请检查此fiddle

在.item课程中添加了以下规则。

.item{
    vertical-align: top; /* alignment */
    margin-top: 10px /* breathing space */
}