横並びにした要素の高さが異なる場合にレイアウトが崩れるのを防ぐ

floatで横並びにした要素が複数行になる場合に、高さの異なる要素が含まれているとレイアウトが崩れるときがあります。
今回はHTML構造を変更しないで崩れを防ぐ方法を調べてみました。

サンプルコード

HTML

3番目の要素の高さを高くしてみます。

<div class="list">
	<div class="list-item">リストアイテム1</div>
	<div class="list-item">リストアイテム2</div>
	<div class="list-item">リストアイテム3<br />リストアイテム3<br />リストアイテム3<br />リストアイテム3</div>
	<div class="list-item">リストアイテム4</div>
	<div class="list-item">リストアイテム5</div>
	<div class="list-item">リストアイテム6</div>
	<div class="list-item">リストアイテム7</div>
	<div class="list-item">リストアイテム8</div>
	<div class="list-item">リストアイテム9</div>
	<div class="list-item">リストアイテム10</div>
</div>

CSS

.list {
	width: 960px;
	margin: 0 auto;
}
.list-item {
	float: left;
	width: 200px;
	margin: 10px;
	padding: 10px;
	background: #ccc;
}

5番目の要素が左端にくるのが正しいのですが、高さのある3番目の要素の右になってしまいます。
対応前のデモページ
　

対応方法

floatの代わりにdisplay: inline-block;を使います。

CSS

.list {
	width: 960px;
	margin: 0 auto;
	font-size: 0;
}
.list-item {
	display: inline-block;
	width: 200px;
	margin: 10px;
	padding: 10px;
	font-size: 16px;
	background: #ccc;
}

display: inline-block;を使うと要素間に隙間ができてしまうので、.listにfont-size: 0;を指定して、.list-itemで元に戻すようにしています。
対応後のデモページ
　

要素の縦位置を調整したい場合は、vertical-alignで設定できます。

CSS

.list {
	width: 960px;
	margin: 0 auto;
	font-size: 0;
}
.list-item {
	display: inline-block;
	width: 200px;
	margin: 10px;
	padding: 10px;
	vertical-align: middle;
	font-size: 16px;
	background: #ccc;
}

対応後のデモページ2

今回はdisplay: inline-block;で対応しましたが、対応ブラウザによってはflexboxでも対応できます。