インラインブロックを使用して2つのdivに垂直方向の配置を適用する

Question

だから私はいくつかのDIVを持っています。構造はこちら

    <div id="content">
        <div id="lcol">some content</div>
        <div id="lcol">some<br />content</div>
    </div>

そして、私の問題は、2つのdivの高さが異なることです。 'content'は単なる通常のdivですが、 'lcol'にはdisplay:inline-blockを使用しています。 2つのlcol divは実際には並んで表示されますが、divの下部に固定されています。それらをdivの上部に揃えてください。 「コンテンツ」にvertical-align:topを追加してみましたが、何も起こりませんでした。

何か案は？

JsFiddle： http://jsfiddle.net/qxe8h/1/

Answer 1

vertical-align：topをinline-block要素に付与します。このように書きます：

#lcol {vertical-align:top;}

これをチェックしてください http://jsfiddle.net/qxe8h/2/