Side-by-side blocks using 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

回答1:

Use vertical-align:top;

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

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.

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

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

来源：https://stackoverflow.com/questions/12539346/side-by-side-blocks-using-css