CSS でテキストがフローティング画像の周囲に回り込まないようにするにはどうすればよいですか?

CSS でのフローティング画像とテキスト

画像の周りでテキストが回り込むのを防ぎながら、サムネイルをテキストの左側にフローティングするレイアウトを希望します。 。これを実現する方法は次のとおりです:

HTML 構造:

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

CSS スタイル:

.post-container {
    margin: 20px 20px 0 0;  
    border: 5px solid #333;
    display: flex; /* Create a flexible layout container */
}
.post-thumb {
    float: left;
    margin-right: 20px; /* Create some spacing between the thumbnail and text */
}
.post-thumb img {
    display: block;
}
.post-content {
    margin-left: auto; /* Push the text to the right side of the container */
}
.post-title {
    font-weight: bold;
    font-size: 200%;
}

CSS の display: flex を使用して、ポストサムと必要に応じてコンテンツ後の要素を拡大および縮小します。ポストサムの float: left とポストコンテンツの margin-left: auto は、要素を希望どおりに配置するのに役立ちます。

以上がCSS でテキストがフローティング画像の周囲に回り込まないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。