web-dev-qa-db-ja.com

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

だから私はいくつかの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/

13
Dalton Gore

vertical-align:topinline-block要素に付与します。このように書きます:

#lcol {vertical-align:top;}

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

41
sandeep