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

CSS を使用してテキストの左側に画像をフローティングする

問題

画像をフローティングするのが困難ですHTML 要素内のテキストの左側に配置されますが、テキストは右側に保持され、画像がテキストの周囲に回り込むのを防ぎます。

現在の実装

HTML コードは次のとおりです。 :

<div class="post-container">                
   <div class="post-thumb"><img  src="/static/imghwm/default1.png" data-src="thumb.jpg" class="lazy" alt="CSS で画像をテキストの左側にフロートさせるにはどうすればよいですか?" ></div>
   <div class="post-title">Post title</div>
   <div class="post-content"><p>post description description description etc etc etc</p></div>
</div>

CSS コード:

.post-container{
    margin: 20px 20px 0 0;  
    border:5px solid #333;
}

.post-thumb img {
    float: left;
    clear:left;
}

.post-content {
    float:right;
}

解決策

望ましい結果を達成するには、次の変更を加えることができます。

HTML:

<div class="post-container">                
    <div class="post-thumb"><img  src="/static/imghwm/default1.png" data-src="http://dummyimage.com/200x200/f0f/fff" class="lazy" alt="CSS で画像をテキストの左側にフロートさせるにはどうすればよいですか?" ></div>
    <div class="post-content">
        <h3 id="Post-title">Post title</h3>
        <p>post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc </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%
}

説明

• .post-container の overflow: auto プロパティにより、テキストが画像の周りを流れることができ、折り返されなくなります。
• 画像の display: block プロパティにより、コンテナの全幅。
• .post-content の margin-left プロパティは、画像が左側に表示されるのに十分なスペースを提供します。

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