7

我想并排放置块元素。我不想使用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

4

2 回答 2

14

采用vertical-align:top;

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

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

于 2012-09-21T23:25:18.810 回答
0

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

您可以float: left改为使用它们来制作块元素并将它们并排放置：

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

于 2012-09-21T23:26:19.467 回答