垂直平衡具有相同空间但高度不同的盒子

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;
}

这是我的小提琴需要您的帮助来解决。

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对静态放置的元素没有影响 ）

更新小提琴

更新 ：

如果要使框之间的垂直空间相等，则可以按如下方式使用css3 flex框 （ 尽管框的顺序会有所不同 ）：

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

演示

如果您想完全按照图片中所示的顺序进行订购，那么您可能需要依靠砌体之类的插件

Answer 3

请检查这个小提琴

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

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