CSS浮动：将图像浮动到文本的左侧

对于每个邮箱，我希望缩略图浮动到左侧，文本向右浮动。 我不想让拇指环绕文字。

这是我的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;
}

---

这是你在追求什么？

我将标题改为h3 （标题）标签，因为它比使用div更具语义选择性。

现场演示＃1
现场演示＃2 （顶部有标题，不确定是否需要）

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{
    margin: 20px 20px 0 0;  
    border:5px solid #333;
}

.post-thumb img {
    float: left;
}

.post-content {
    float: left;
}

编辑：实际上，你不需要宽度，只是向左浮动

---

看看这个示例：http://jsfiddle.net/Epgvc/1/

我只是将标题悬浮在左侧，并添加了一个clear:both div到底部。

链接地址: http://www.djcxy.com/p/88453.html

上一篇: CSS Float: Floating an image to the left of the text

下一篇: How can I put an input element on the same line as its label?