CSSのみで横並びの要素の高さを揃える | HTML・CSS・JavaScriptのテクニック集 | Webサイト制作支援 | ShanaBrian Website

JavaScriptを使わずCSSのみで横並びの要素の高さを揃えるには、以下の方法で可能です。 フレキシブル・レイアウトを使用する グリッド・レイアウトを使用する 最大の行数を固定とする table-cellを使用する inline-blockを使用する ネガティブmarginを使用する フレキシブル・レイアウトを使用する フレキシブル・レイアウトを使用します。 この指定が一番楽で柔軟な実装方法ですが、古いバージョンのブラウザの一部が対応していませんので注意が必要です。 ※ 対応ブラウザは次を参照 フレキシブル・レイアウトの基本 【HTML】 <ul class="sample"> <li>テスト</li> <li>テストテストテストテストテストテストテストテスト</li> <li>テストテストテストテスト</li> <li>テストテスト</li> <li>テスト</li> <li>テスト

[yayocan]

flexbox

[kamekio]

“ display:-webkit-box; display:-moz-box; display:-ms-box; display:-webkit-flexbox; display:-moz-flexbox; display:-ms-flexbox; display:-webkit-flex; display:-moz-flex; display:-ms-flex; display:flex; -webkit-box-lines:multiple; -moz-box-lines:multiple; -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap; -