1

我有一个问题，当没有足够的空间时，我正在使用display:inline而不是创建 4 个在中心水平对齐的块。float:left我能够通过删除内联元素之间的空白来删除不需要的水平边距，但现在看来我有不需要的垂直边距。

虽然它不是真正的边距，但它是关闭的元素的基线（因为它们被视为文本）。在我的 jsFiddle 示例中，您可以看到问题所在。我在第二个块中有更多文本，但它在基线上垂直对齐，在顶部创建了一个看起来是边距的东西。

我能做些什么来确保它们在不添加一堆包装纸的情况下正确垂直排列？删除不需要的垂直边距的外观。

HTML：

<div class="wrapper-pricebox">
<div class="pricebox">
<span>Yikes</span>
<h5>Block One</h5>
blah blah blah...
</div><div class="pricebox">
<span>Yikes</span>
<h5>Block Two</h5>
blah blah blah...blah blah blah...
</div><div class="pricebox">
<span>Yikes</span>
<h5>Block Three</h5>
blah blah blah...
</div><div class="pricebox">
<span>Yikes</span>
<h5>Block Four</h5>
blah blah blah...
</div>
</div>

CSS：

.wrapper-pricebox {
    margin: 0 auto;
    overflow: auto;
    text-align: center;
}
.pricebox {
    display: inline-block;
    min-height: 350px;
    padding: 10px;
    margin: 7px;
    width: 23%;
    background: rgba(0,0,0,0.1);
    border: 2px solid #444 !important;
}

jsFiddle：http: //jsfiddle.net/Jd866/

4

1 回答 1

3

这是你要找的吗？http://jsfiddle.net/5VCch/

我添加了vertical-align:top

于 2013-09-01T20:20:02.137 回答