【HTML/CSS】可変コンテンツ要素を横並びにして高さを統一する

要素横並び:可変コンテンツ高さ統一

横並びの要素の中のコンテンツ縦幅が可変する場合、
liをfloatする方法では高さがバラバラになってしまう。

displayTable001

<ul>
	<li>テキスト</li>
	<li>テキスト<br />テキスト<br />テキスト<br /></li>
	<li>テキスト<br />テキスト<br />テキスト<br />テキスト<br />テキスト<br /></li>
	<li>テキスト</li>
	<li>テキスト<br />テキスト<br /></li>
</ul>
<style>
ul{
	width: 100%;
	margin-top: 20px;
}

li{
	float: left;
	width: 20%;
	border: 1px solid #000000;
	margin: -1px;
}
</style>

CSSのdisplayプロパティで要素をtable構造にする事ができる。
※IE8からサポートされている

display: table;
要素をブロック表要素にする。HTMLでいうtable要素。

display: table-cell;
要素を表のセル要素にする。HTMLでいうtd,th要素。

他にも
display: table-column-group;
display: table-header-group;
display: table-row-group;
display: table-footer-group;
などなどいろいろ準備されています。

displayTable002

<style>
ul{
	display: table;
	width: 100%;
	margin-top: 20px;
}

li{
	display: table-cell;
	border: 1px solid #000000;
}
</style>

基本考え方はtableタグと同じなので、
“vertical-align: middle;”で縦方向(垂直方向)も中央寄せする事ができる。

displayTable003

<style>
ul{
	display: table;
	width: 100%;
	margin-top: 20px;
}

li{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	border: 1px solid #000000;
}
</style>

レスポンシブWEBデザインなどでPC表示では横並び、スマートフォンでは縦並びにしたい時など、
tableタグを使えない時に重宝します。