<div>横並びの高さを合わせる方法

複数のdivタグに「display:inline-block;」を指定して横並びに表示したいといったとき、ただ並べただけでは開始の高さが揃わない場合があります。そんな時は「vertical-align: top;」を設定することで位置を揃えることができます。

◆ 「vertical-align: top;」指定なし

<div style="display:inline-block; width:50px; height:80px; background-color:gray;"></div>
<div style="display:inline-block; width:50px; height:70px; background-color:gray;"></div>
<div style="display:inline-block; width:50px; height:90px; background-color:gray;"></div>

◆ 「vertical-align: top;」指定あり

<div style="display:inline-block; width:50px; height:80px; background-color:gray; vertical-align: top;"></div>
<div style="display:inline-block; width:50px; height:70px; background-color:gray; vertical-align: top;"></div>
<div style="display:inline-block; width:50px; height:90px; background-color:gray; vertical-align: top;"></div>

• CSSで要素を横並びにする方法まとめ