Cording

Javascriptやtableを使わずに横並び要素の高さを揃える

Javascriptやtableを使わずに横並び要素の高さを揃える方法はいくつかありますが、
CSSを使って手軽に実装できる方法をご紹介します。

html

<ul class="demo-list">
    <li>ãã¢ãã­ã¹ããã¢ãã­ã¹ããã¢ãã­ã¹ããã¢ãã­ã¹ããã¢ãã­ã¹ã</li>
    <li>ãã¢ãã­ã¹ã</li>
    <li>ãã¢ãã­ã¹ããã¢ãã­ã¹ã</li>
    <li>ãã¢ãã­ã¹ããã¢ãã­ã¹ããã¢ãã­ã¹ã</li>
    <li>ãã¢ãã­ã¹ã</li>
    <li>ãã¢ãã­ã¹ããã¢ãã­ã¹ããã¢ãã­ã¹ã</li>
    <li>ãã¢ãã­ã¹ããã¢ãã­ã¹ããã¢ãã­ã¹ããã¢ãã­ã¹ããã¢ãã­ã¹ããã¢ãã­ã¹ããã¢ãã­ã¹ã</li>
</ul>

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;
}
URL
TBURL

Leave Comments

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Category List

Return Top