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