CSSのみで横並びの要素の高さを揃える

JavaScriptを使わずCSSのみで横並びの要素の高さを揃えるには、以下の方法で可能です。

• フレキシブル・レイアウトを使用する
• グリッド・レイアウトを使用する
• 最大の行数を固定とする
• table-cellを使用する
• inline-blockを使用する
• ネガティブmarginを使用する

フレキシブル・レイアウトを使用する

フレキシブル・レイアウトを使用します。
この指定が一番楽で柔軟な実装方法ですが、古いバージョンのブラウザの一部が対応していませんので注意が必要です。

• ※ 対応ブラウザは次を参照
  フレキシブル・レイアウトの基本

【HTML】

<ul class="sample"> <li>テスト</li> <li>テストテストテストテストテストテストテストテスト</li> <li>テストテストテストテスト</li> <li>テストテスト</li> <li>テスト</li> <li>テストテストテストテストテストテストテスト</li> <li>テストテストテストテスト</li> <li>テストテスト</li> </ul>

【CSS】

ul.sample { margin:0 0 10px; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:-moz-flex; display:flex; -webkit-box-lines:multiple; -moz-box-lines:multiple; -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; width:396px; } ul.sample li { margin:0 10px 10px 0; padding:10px; border:1px solid #aaa; width:100px; background-color:#ddd; list-style:none; }

サンプル

• テスト
• テストテストテストテストテストテストテストテスト
• テストテストテストテスト
• テストテスト
• テスト
• テストテストテストテストテストテストテスト
• テストテストテストテスト
• テストテスト
• テスト

グリッド・レイアウトを使用する

グリッド・レイアウトを使用します。
この指定が一番楽で柔軟な実装方法ですが、古いバージョンのブラウザの一部が対応していませんので注意が必要です。

• ※ 対応ブラウザは次を参照
  グリッドレイアウトの基本
• ※ IE10～IE11、Edgeはgrid-columnプロパティ、grid-rowプロパティを指定する必要がある。

【HTML】

<ul class="sample"> <li>テスト</li> <li>テストテストテストテストテストテストテストテスト</li> <li>テストテストテストテスト</li> <li>テストテスト</li> <li>テスト</li> <li>テストテストテストテストテストテストテスト</li> <li>テストテストテストテスト</li> <li>テストテスト</li> </ul>

【CSS】

ul.sample { margin:0 0 10px; display:-ms-grid; display:grid; -ms-grid-columns:auto auto auto; grid-template-columns:auto auto auto; width:396px; } ul.sample li { margin:0 10px 10px 0; padding:10px; border:1px solid #aaa; background-color:#f5f5f5; list-style:none; } ul.sample li:nth-child(1) { -ms-grid-column:1; grid-column:1; -ms-grid-row:1; grid-row:1; } ul.sample li:nth-child(2) { -ms-grid-column:2; grid-column:2; -ms-grid-row:1; grid-row:1; } ul.sample li:nth-child(3) { -ms-grid-column:3; grid-column:3; -ms-grid-row:1; grid-row:1; } ul.sample li:nth-child(4) { -ms-grid-column:1; grid-column:1; -ms-grid-row:2; grid-row:2; } ul.sample li:nth-child(5) { -ms-grid-column:2; grid-column:2; -ms-grid-row:2; grid-row:2; } ul.sample li:nth-child(6) { -ms-grid-column:3; grid-column:3; -ms-grid-row:2; grid-row:2; } ul.sample li:nth-child(7) { -ms-grid-column:1; grid-column:1; -ms-grid-row:3; grid-row:3; } ul.sample li:nth-child(8) { -ms-grid-column:2; grid-column:2; -ms-grid-row:3; grid-row:3; } ul.sample li:nth-child(9) { -ms-grid-column:3; grid-column:3; -ms-grid-row:3; grid-row:3; }

サンプル

• テスト
• テストテストテストテストテストテストテストテスト
• テストテストテストテスト
• テストテスト
• テスト
• テストテストテストテストテストテストテスト
• テストテストテストテスト
• テストテスト
• テスト

最大の行数を固定とする

高さを揃える要素にheightプロパティをemなどの相対単位で指定します。
内部の要素がはみ出る場合は、overflow:hidden;を指定します。

• ※ IE7以下対応
• ※ 背景などの装飾やborderプロパティも揃う
• ※ 行数分の高さ固定により文字拡大などで指定行数分以外の変化に非対応

【HTML】

<ul class="sample"> <li>テスト</li> <li>テストテストテストテストテストテストテストテスト</li> <li>テストテストテストテスト</li> <li>テストテスト</li> <li>テスト</li> <li>テストテストテストテストテストテストテスト</li> <li>テストテストテストテスト</li> <li>テストテスト</li> </ul>

【CSS】

ul.sample { margin:0 0 10px; width:396px; } ul.sample li { margin:0 10px 10px 0; padding:10px; border:1px solid #aaa; float:left; overflow:hidden; width:100px; height:6.4em; background-color:#ddd; list-style:none; }

サンプル

• テスト
• テストテストテストテストテストテストテストテスト
• テストテストテストテスト
• テストテスト
• テスト
• テストテストテストテストテストテストテスト
• テストテストテストテスト
• テストテスト
• テスト

table-cellを使用する

高さを揃える要素にdisplay:table-cell;を指定します。

• ※ IE7以下非対応（ハックによる対応）
• ※ 背景などの装飾やborderプロパティも揃う
• ※ 行ごとに親要素を分ける必要あり（下記例でいうul要素にあたる）
• ※ テーブルのセルとして扱うため、marginなどが非対応
  （border-spacingなどで余白を付け、親要素のmarginで打ち消すなどをすることで、セル間の余白を調整することは可能）

【HTML】

<ul class="sample"> <li>テスト</li> <li>テストテストテストテストテストテストテストテスト</li> <li>テストテストテストテスト</li> </ul> <ul class="sample"> <li>テストテスト</li> <li>テスト</li> <li>テストテストテストテストテストテストテスト</li> </ul> <ul class="sample"> <li>テストテストテストテスト</li> <li>テストテスト</li> <li>テスト</li> </ul>

【CSS】

ul.sample { display:table; width:396px; } ul.sample li { margin:0 10px 10px 0; padding:10px; border:1px solid #aaa; display:table-cell; width:100px; background-color:#ddd; list-style:none; } /* IE 6 */ * html ul.sample li { display:inline; zoom:1; } /* IE 7 */ *+ html ul.sample li { display:inline; zoom:1; }

サンプル

• テスト
• テストテストテストテストテストテストテストテスト
• テストテストテストテスト

• テストテスト
• テスト
• テストテストテストテストテストテストテスト

• テストテストテストテスト
• テストテスト
• テスト

inline-blockを使用する

高さを揃える要素にdisplay:inline-block;を指定します。
IE7以下ではinline-blockに対応していませんので、ハックを使用して代わりにinlineを指定します。
なお、実際は高さが揃うのではなく、要素の位置がおかしくならないようになるだけですので、borderなど装飾類は揃いません。
また、マークアップでインデントを使用すると（inline-blockなので）余白が含まれてしまうので、インデントをしないマークアップにする必要があります。

• ※ IE7以下対応（ハック使用）
• ※ 揃える要素のマークアップのインデントが付けられない

【HTML】

<ul class="sample"> <li>テスト</li><li>テストテストテストテストテストテストテストテスト</li><li>テストテストテストテスト</li><li>テストテスト</li><li>テスト</li><li>テストテストテストテストテストテストテスト</li><li>テストテストテストテスト</li><li>テストテスト</li> </ul>

【CSS】

ul.sample { margin:0 0 10px; width:396px; } ul.sample li { margin:0 10px 10px 0; padding:10px; border:1px solid #aaa; display:inline-block; width:100px; background-color:#ddd; list-style:none; vertical-align:top; /* 上端揃え */ } /* IE6 */ * html ul.sample li { display:inline; /* IEではinline-blockと同じ表現になる */ } /* IE7 */ *+ html ul.sample li { display:inline; /* IEではinline-blockと同じ表現になる */ }

サンプル

• テスト
• テストテストテストテストテストテストテストテスト
• テストテストテストテスト
• テストテスト
• テスト
• テストテストテストテストテストテストテスト
• テストテストテストテスト
• テストテスト

ネガティブmarginを使用する

高さを揃える要素にmarginの下方向に-32768px、paddingの下方向に32768pxを指定します。
要素が突き抜けるので、overflow:hidden;を指定します。

32768pxという数値は、ブラウザの認識できる最大の高さで、32768pxを高さを超える数値を指定してもブラウザは32768pxとして割り当てます。

• ※ IE7以下対応
• ※ 行ごとに親要素を分ける必要あり（下記例でいうul要素にあたる）
• ※ 背景などの装飾やborderプロパティは揃えられない

【HTML】

<ul class="sample"> <li>テスト</li> <li>テストテストテストテストテストテストテストテスト</li> <li>テストテストテストテスト</li> </ul> <ul class="sample"> <li>テストテスト</li> <li>テスト</li> <li>テストテストテストテストテストテストテスト</li> </ul> <ul class="sample"> <li>テストテストテストテスト</li> <li>テストテスト</li> <li>テスト</li> </ul>

【CSS】

ul.sample { margin:0 0 10px; overflow:hidden; width:396px; } ul.sample li { margin:0 10px -32768px 0; padding:10px 10px 32768px; border:1px solid #aaa; float:left; width:100px; background-color:#ddd; list-style:none; }

サンプル

• テスト
• テストテストテストテストテストテストテストテスト
• テストテストテストテスト

• テストテスト
• テスト
• テストテストテストテストテストテストテスト

• テストテストテストテスト
• テストテスト
• テスト