【CSS3】要素を横並びに配置する［display:table;］と［display:table-cell］の使い方。

株式会社オンズ 開発ブログ 【CSS3】要素を横並びに配置する［display:table;］と［display:table-cell］の使い方。 複数の要素を横並びで表示させたい場合、これまでは display:inline; か float を使うか、あるいは <table> 要素で組むか、そのいずれかの方法を利用するのが一般的でした。 それが CSS3 からは display:table; と display:table-cell が新たに導入され、選択肢が増えたのと同時に、この方法を利用することで横並びの配置がずいぶんラクになりました。 例えば float を使って均等に配置させたいとき、それぞれの要素の横幅を指定する必要がありましたが、［display:table;］と［display:table-cell］を使えばブラウザ側が自動で要素の横幅を調整してくれるので余分な計算が不要

[ricopinx]

[display:table-cell]