折り返さずに画像をテキストの左側にフロートさせるにはどうすればよいですか?

CSS Float: テキストの左側に画像をフローティングする

このシナリオでは、サムネイル画像が配置されるレイアウトを実現することを目指します。テキストが画像の周りを回り込むことなく、テキスト コンテンツの左側にフロート表示されます。 HTML と CSS を使用してこれを実現する方法について詳しく説明します:

HTML構造:

<div class="post-container">
    <div class="post-thumb">
        <img src="thumb.jpg">
    </div>
    <div class="post-content">
        <h3 class="post-title">Post title</h3>
        <p>Post description description description etc etc etc</p>
    </div>
</div>

CSS:

.post-container {
    margin: 20px 20px 0 0;  
    border: 5px solid #333;
    overflow: auto
}
.post-thumb {
    float: left
}
.post-thumb img {
    display: block
}
.post-content {
    margin-left: 210px
}
.post-title {
    font-weight: bold;
    font-size: 200%
}

説明:

• 。ポストコンテナにはサムネイルとテキストの両方が含まれますcontent.
• .post-thumb は、コンテナの左側に画像をフロートさせます。
• 画像の表示: ブロックを設定すると、画像が .post-thumb コンテナの全幅を占めるようになります。
• .post-content は、画像との間に十分なスペースがあることを保証するために、210 ピクセルの margin-left を適用します。 text.
• .post-title は、投稿タイトルを太字で大きなフォント サイズで書式設定します。

以上が折り返さずに画像をテキストの左側にフロートさせるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。