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中文网其他相关文章！