コード

アーカイブなどでよくあるレイアウトの１つ「写真+テキスト」の各ブロックが横並びになるレイアウトは、floatを使う方法と、display: table;を使う方法の２パターンがある。どちらを使っても同じレイアウトを実現できるが、例えば、写真は右、テキストは左に並ぶリストであれば、display: table;を使ったほうが、回り込みの解除とかの必要もなくコードはすっきりする。

ただ、奇数行は写真が左、偶数行は写真が右、などのように配置が異なる場合は、その行ごとに「奇数行は写真ブロックのコードを先に書いて、次にテキストブロックのコードを書いて。偶数行はテキストブロックのコードを先に書いて…」といったように、行ごとに書き分ける必要が出てくる。この場合、あとから新しいリストが追加になったり、順番が変わった場合に修正が面倒だ。

この手間を排除したい場合は、floatを使うのがいい。:nth-childを使えば、偶数行(even)と奇数行(odd)でスタイルを指定することができる。本記事では、それぞれのコードを紹介する。

サンプル (写真とテキストの並び順が一定の場合)

See the Pen 「写真+文章」を横並びに配置したリスト(table ver.) by Tora (@webtoranomaki) on CodePen.

HTML

<div class="flex-box">
  <div class="flex-box-img"><img class="img"  src="image.jpg"></div>
  <div class="flex-box-body">ここにテキストが入ります。</div>
</div>
<div class="flex-box">
  <div class="flex-box-img"><img class="img"  src="image.jpg"></div>
  <div class="flex-box-body">ここにテキストが入ります。</div>
</div>

CSS

.flex-box {
	display: table;
	width: 100%;
	margin-bottom: 20px;
}
.flex-box-img {
	display: table-cell;
	width: 120px;
}
.flex-box-img .img {
	display: block;
	width: 100%;
	height: auto;
}
.flex-box-body {
	display: table-cell;
	vertical-align: top;
	padding-left: 10px; /* 画像⇔文字間 */
}

サンプル (偶数行と奇数行で写真とテキストの並び順が異なる場合)

See the Pen 「写真+文章」を横並びに配置したリスト(float ver.) by Tora (@webtoranomaki) on CodePen.

HTML

※HTMLは上記のfloatのものと同一

<div class="flex-box">
  <div class="flex-box-img"><img class="img"  src="image.jpg"></div>
  <div class="flex-box-body">ここにテキストが入ります。</div>
</div>
<div class="flex-box">
  <div class="flex-box-img"><img class="img"  src="image.jpg"></div>
  <div class="flex-box-body">ここにテキストが入ります。</div>
</div>

CSS

.flex-box {
	margin-bottom: 20px;
	overflow: hidden;
}
.flex-box-img {
	width: 120px;
}
.flex-box:nth-child(odd) .flex-box-img {
	float: left;
	margin-right: 10px; /* 画像⇔文字間 */
}
.flex-box:nth-child(even) .flex-box-img {
	float: right;
	margin-left: 10px; /* 画像⇔文字間 */
}
.flex-box-img .img {
	display: block;
	width: 100%;
	height: auto;
}
.flex-box-body {
	overflow: hidden;
}