画像にテキストを回り込ませたレイアウト | Layout with text wrapped around the image

HTML

<div class="entry">
<img src="entry-square.jpg" alt="">
<h1>タイトル</h1>
<p>あいうえおかきくけこさしすせそたちつてと。あいうえおかきくけこさしすせそたちつてと。あいうえおかきくけこさしすせそたちつてと。</p>
<p>たちつてとなにぬねの。たちつてとなにぬねの。たちつてとなにぬねの。たちつてとなにぬねの。たちつてとなにぬねの。</p>
</div>

CSS

.entry {
padding: 20px;
background-color: #dfe3e8;
}
.entry img {
float: left;
max-width: 30%;
height: auto;
margin: 0 20px 10px 0;
vertical-align: bottom;
}
.entry h1 {
margin: 0 0 20px 0;
font-size: 26px;
line-height: 1.2;
}
.entry p {
margin: 0 0 20px 0;
font-size: 14px;
line-height: 1.6;
}
.entry::after {
content: "";
display: block;
clear: both;
}

floatで画像にテキストを回り込ませる方法ですね。::after疑似要素とclearを使い解除することも忘れずに。| It's a way to wrap text around an image with float. Don't forget to use the :: after pseudo-element and clear to clear it.