CSS中如何防止文字環繞浮動圖像？

CSS 中的浮動圖像和文字

您需要一種縮圖浮動到文字左側的佈局，同時防止文字環繞圖像。實現此目的的方法如下：

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-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，我們創建了一個靈活的容器，允許post-thumb和 post-content 元素根據需要擴大和縮小。 post-thumb 上的 float: left 和 post-content 上的 margin-left: auto 有助於根據需要定位元素。

以上是CSS中如何防止文字環繞浮動圖像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！