如何在 CSS 中將圖像浮動到文字左側？

使用CSS 將影像浮動至文字左側

問題

您在浮動影像時遇到困難位於HTML元素中文字的左側，同時保持文字位於右側並防止圖像環繞它。

目前實作

這是您的 HTML 程式碼:

<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 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="http://dummyimage.com/200x200/f0f/fff" /></div>
    <div class="post-content">
        <h3 class="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中文網其他相關文章！