Question

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

虽然它不是真正的边缘，因为它是元素的基线（因为它们被视为文本）被关闭。在我的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/

Answer 1

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

我添加了vertical-align:top

使用display：内联块和垂直对齐

1 个答案: