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

Question

对于每个帖子框，我希望缩略图向左浮动，文本向右浮动。我不想让缩略图环绕文本。

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

- Cris

Answer 1

这是你所需要的吗？

• 我将你的标题更改为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%
}

- thirtydot

---

谢谢。如果我想让.post-content的内容与文章缩略图的底部对齐，该怎么做？我不能给'.post-content'设置高度。 - Kiran Aghor

如果我不知道图像的宽度，但是现在.post-content上有margin-left: 210px，有没有一种方法可以在不使用js的情况下解决它？ - Saravanabalagi Ramachandran

@ZekeDran：http://jsfiddle.net/RXrvZ/2474/，https://dev59.com/6mw05IYBdhLWcg3whCJn#7190310 - thirtydot

Answer 2

只需要将两个元素都向左浮动：

.post-container{
    margin: 20px 20px 0 0;  
    border:5px solid #333;
}

.post-thumb img {
    float: left;
}

.post-content {
    float: left;
}

编辑：实际上，您不需要宽度，只需将两个元素都向左浮动即可。

- Demelziraptor

---

请确保在 #div.post-content 下方有一个带有 clear:both 的 div。 - Demelziraptor

Answer 3

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

我只是将标题向左浮动，并在底部添加了一个 clear:both 的 div。

- Dutchie432

Answer 4

.post-container{
    margin: 20px 20px 0 0;  
    border:5px solid #333;
    width:600px;
    overflow:hidden;
}

.post-thumb img {
    float: left;
    clear:left;
    width:50px;
    height:50px;
    border:1px solid red;
}

.post-title {
     float:left;   
    margin-left:10px;
}

.post-content {
    float:right;
}

<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>

{{link1：jsFiddle}}

- dmackerman

Answer 5

在这种情况下，我几乎总是只在我的文本元素上使用overflow:hidden，它通常非常有效；）

.post-container {
 margin: 20px 20px 0 0;
 border:5px solid #333;
}
.post-thumb img {
 float: left;
}
.post-content {
 overflow:hidden;
}

- Optimator

Answer 6

设置文章内容和缩略图的宽度，以便获得两列布局。

- quarkdown27

Answer 7

使用 display: flex 解决方案（具有响应式行为）：http://jsfiddle.net/dkulahin/w3472kct HTML：

<div class="content">
    <img src="myimage.jpg" alt="" />
    <div class="details">
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
</div>

CSS：

.content{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.content img {
    width: 150px;
}
.details {
    width: calc(100% - 150px);
}
@media only screen and (max-width: 480px) {
    .content {
        flex-direction: column;
    }
    .details {
        width: 100%;
    }
}

- Dzmitry Kulahin