Cording

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

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

Leave Comments

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

※日本語が含まれない投稿は送信できませんので、ご了承くださいませ。

Category List

Return Top