CSS で画像の下に文字を回り込ませない方法

画像を左側に、テキストを右側に持ってくるレイアウトがある場合、画像に対して普通に float で回りこみを行うと以下のような表示になります。

このようなレイアウトの際に、画像の下にテキストを回り込ませない表示にする場合はテキスト部分に対して overflow: hidden を書ければ簡単に回りこませなくすることができます。

HTML

1
2
3
4
<div class="hoge">
    <img src="test.pnh">
    <p>テキストテキスト</p>
</div>

CSS

1
2
3
4
5
6
.hoge img {
    float: left;
}
.hoge p {
    overflow: hidden;
}

画像の下に文字が回り込みません

以下のサイトが参考になりました。

追記: 画像の分の高さを確保する

みやさんからアドバイスを頂きました。.hoge に overflow: autoで画像の高さを確保できるとのことです。高さも確保したい際は是非参考にさせて頂きましょう。overflow: auto については以下の記事が参考になります。

コメント

コメントは受け付けていません。