Roroa.

こんにちはkazukiです。
最近、横並びのレイアウトを組むときflexやgridを使う機会が多くなりました。
ですがfloatを使った方が便利だな〜と思ったレイアウトがありましたので
今回はそれをメモしておこうかと思います。
ちなみに、私がflexやgridを完璧に使いこなせているという可能性はすごく高いので参考までに。

レイアウト

このようにPCの時はテキスト群 + 画像に見えていますが、スマホの際はタイトル → 画像 → テキストのようになる形が結構あります。
これflexやgridで出来るんじゃない？って思っていたのですが。。少し難しいかったです。（私の技術・発想力では難しく。。）

というもの、スマホのレイアウトを意識して縦積みのhtmlを組むまではいいのですが、flexやgridを使いPCレイアウトを実現しようとすると、どうしてもテキストが画像の下にきてしまったり、タイトルの下にきたとしても意図しない余白が少しできてしまったりでなかなか難しいかったです。。。

floatで解決

そこでfloatを使って解決です。
以下サンプルコードになります。

<div class="box clearfix">
	<div class="ttl">タイトルになります</div>
	<figure class="photo"><img src="/_images/_dummy01_02.jpg" alt=""></figure>
	<div class="txt">テキストが入りますテキストが入りますテキストが入りますテキストが入ります</div>
	<div class="txt">テキストが入りますテキストが入りますテキストが入りますテキストが入ります</div>
</div>

.box {
	padding: 20px 10px;
	background-color: #fff;
}
.box .ttl,
.box .txt {
	float: left;
	width: 48%;
}
.box .ttl {
	margin-bottom: 20px;
	font-size: 1.2em;
	font-weight: 700;
}
.box .txt + .txt {
	margin-top: 10px;
}
.box .photo {
	float: right;
	width: 48%;
	text-align: center;
}
@media only screen and (max-width:767px) {
	.box .ttl,
	.box .txt,
	.box .photo {
		float: none;
		width: auto;
	}
	.box .photo {
		margin-bottom: 20px;
	}
}

DEMO

タイトルになります

テキストが入りますテキストが入りますテキストが入りますテキストが入ります

テキストが入りますテキストが入りますテキストが入りますテキストが入ります

.ttlと.txtの幅を同じ値で指定し、flot:left;で左寄せにします。そして、画像は右寄せ。これでテキスト群は左寄せかつ、上詰めに並んでくれます。また、タイトルしたにマージンつけられます。

なお、floatを使う際は、clearfixもしくはoverflow: hidden;などを使って高さがなくなる現象を解消してください。