Javascriptやtableを使わずに横並び要素の高さを揃える方法はいくつかありますが、
CSSを使って手軽に実装できる方法をご紹介します。
html
- デモテキストデモテキストデモテキストデモテキストデモテキスト
- デモテキスト
- デモテキストデモテキスト
- デモテキストデモテキストデモテキスト
- デモテキスト
- デモテキストデモテキストデモテキスト
- デモテキストデモテキストデモテキストデモテキストデモテキストデモテキストデモテキスト
CSS
ul.demo-list { width:720px; margin:0 0 10px; 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; -ms-flex-wrap:wrap; flex-wrap:wrap; } ul.demo-list li { width:200px; margin:0 10px 10px 0; padding:15px; color:#000; background-color:#ddd; list-style:none; }
コメントを書く