2015.6.12
2020.1.7

<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】関連記事