使用CSS的块

I want to have block elements side-by-side. I don't don't want to use left, right, top, or anything similar.

我想把块元素并排放在一起。我不想用左，右，上或者其他类似的东西。

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

Live demo: jsFiddle

现场演示:jsFiddle

2 个解决方案

#1

Use vertical-align:top;

使用vertical-align:最高;

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

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

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

#2

As you are using display: inline-block it's actually inline elements. They work just like character boxes, so they are placed side by side on a text line, that's why they line up with their bottom edge at the same height.

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

You can use float: left instead to make them block elements and place them side by side:

你可以用float: left来代替block elements，并排放置:

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

#1