左画像+右テキスト(テキスト回り込み)

目的

• 左に画像を置き、右にテキストを置き、長文になると画像の下へ回り込むようにしたい。

実行結果

人里離れた森の奥、高くそびえる木々の隙間から柔らかな陽光が差し込み、生い茂る葉を鮮やかな黄金色に染め上げています。足元を流れる小川の澄んだせせらぎは、遠くで響く鳥のさえずりと溶け合い、心地よい調べとなって静かな森に響き渡ります。微風が吹くたびに草木が優しく揺れ、生命力あふれる香りが鼻腔をくすぐります。その香りは日々の忙しさを忘れさせ、凝り固まった心をそっと解きほぐしてくれるかのようです。肌をなでる涼やかな空気を感じながら、大自然の息吹に包まれるこの一瞬は、何物にも代えがたい安らぎの時間を与えてくれます。

解説

• 画像とテキストを完全に左右で分ける装飾だと、高さ(height)に差があると小さい方の上下に余白が出来るので、それを避けたい場合にオススメです。回り込むのでコンパクトにまとまります。

HTML

<div class="layout_4_2">
	<img src="../../image/sample-1.jpg" alt="サンプル画像①" /><p>人里離れた森の奥、高くそびえる木々の隙間から柔らかな陽光が差し込み、生い茂る葉を鮮やかな黄金色に染め上げています。足元を流れる小川の澄んだせせらぎは、遠くで響く鳥のさえずりと溶け合い、心地よい調べとなって静かな森に響き渡ります。微風が吹くたびに草木が優しく揺れ、生命力あふれる香りが鼻腔をくすぐります。その香りは日々の忙しさを忘れさせ、凝り固まった心をそっと解きほぐしてくれるかのようです。肌をなでる涼やかな空気を感じながら、大自然の息吹に包まれるこの一瞬は、何物にも代えがたい安らぎの時間を与えてくれます。</p>
</div>

CSS

.layout_4_2 {
	width: 94%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
}

.layout_4_2 img {
	float: left;
	width: 200px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

.layout_4_2 p {
	font-size: 16px;
	line-height: 1.7;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

.layout_4_2::after {
	content: "";
	display: block;
	clear: both;
}

.layout_4_2 {
	width: 94%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
}

.layout_4_2 img {
	float: left;
	width: 46%;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 0px;
}

.layout_4_2 p {
	font-size: 14px;
	line-height: 1.7;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

.layout_4_2::after {
	content: "";
	display: block;
	clear: both;
}