使用CSS的并排块

Question

我希望并排使用块元素。我不想使用left, right, top或类似的东西。

HTML

<div class="iLB">LOLOLOL</div>
<div class="iLB">
    This is content.<br/>
    This is content.<br/>
    This is content.
</div>
<div class="iLB">This, too?</div>

CSS

.iLB {
    display: inline-block;
}

现场演示：jsFiddle

Answer 1

使用vertical-align:top;

.iLB {
    display: inline-block;
    vertical-align: top;
}​

JSFiddle ：http://jsfiddle.net/97wDh/1/

Answer 2

当您使用display: inline-block时，它实际上是内联元素。它们就像字符框一样工作，因此它们并排放置在文本行上，这就是为什么它们在同一高度上与它们的底边对齐。

您可以使用float: left代替它们阻止元素并将它们并排放置：

http://jsfiddle.net/97wDh/2/