display: table;での要素の並び替えについて
使い方
横並びにしたい子要素を持つ親要素にdisplay:table;を記述し、子要素にdisplay:table-cell;を記述することで適用させることができる。
内容はhtmlのtable要素を使用したテーブルレイアウトと同じでcssでできるようにしたものです。
高さを揃えた横並びのレイアウトや、縦方向の中央揃えがより簡単にできるようになる。
コードの例
ruby.rb
<div class="parent>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
sample.css
.parent {
display: table;
width: 100%;
border: 2px solid red;
margin-top: 10px;
}
.child {
display: table-cell;
border: 1px solid blue;
}
ruby.rb
<div class="parent>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
sample.css
.parent {
display: table;
width: 100%;
border: 2px solid red;
margin-top: 10px;
}
.child {
display: table-cell;
border: 1px solid blue;
}
display: table;は指定した要素分しか幅を広げないため、width100%と記述するなどして調整してあげると良い
Author And Source
この問題について(display: table;での要素の並び替えについて), 我々は、より多くの情報をここで見つけました https://qiita.com/_NNN_/items/503f22122cd1cf7c514f著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .