CSS Float を使用して折り返さずに画像をテキストの左側に配置する方法

CSS Float を使用して画像をテキストの左側に配置する

Web ページをデザインするとき、画像をテキストの左側に表示したい状況に遭遇することがあります。テキストを回り込まずに表示します。 CSS フロートを使用すると、この問題を解決できます。

HTML

提供された HTML には、次の 3 つの必須要素があります。

• .post-container: 全体的な要素が含まれます。 post box.
• .post-thumb: 左にフロートさせたい画像が含まれます。
• .post-content: 投稿のタイトルと説明を保持します。

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

CSS

希望のレイアウトを実現するには、次の CSS プロパティを適用します。

• .post-container: コンテンツを許可するには、overflow: auto を設定します。
• .post-thumb: 画像を左にフローティングするには、float: left を設定します。
• .post-thumb img: 画像が独自のスペースに表示されるように、display: block を設定します。
• .post-content: 画像の幅より大きい左マージンの値を設定します (例: 210px) を使用して、テキストを画像の右側に配置します。

.post-container {
    overflow: auto;
}

.post-thumb {
    float: left;
}

.post-thumb img {
    display: block;
}

.post-content {
    margin-left: 210px;
}

重要な注意事項

• 画像がテキストの周囲に回り込まないように、余白を確保してください。 .post-content の left の値が画像の幅よりも広いです。
• 投稿ボックスの上部にヘッダーが必要な場合は、

  の使用を検討してください。 .post-content.

内のタグ

以上がCSS Float を使用して折り返さずに画像をテキストの左側に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。