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

Answer 1

這是你是一個什麼樣的人壓腳提升？

• 我改變你的標題爲h3（頭）標籤，因爲它是一個更語義選擇，而不是使用div。

Live Demo #1
Live Demo #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% 
} 

Answer 2

看看這個例子：http://jsfiddle.net/Epgvc/1/

我只是floate d標題在左邊，並在底部添加了一個clear:both div ..

Answer 3

設置後內容和後拇指的寬度，以便獲得雙列布局。

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>

jsFiddle

Answer 5

只需要浮動兩個元素左：

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

.post-thumb img { 
    float: left; 
} 

.post-content { 
    float: left; 
} 

編輯：實際上，你並不需要的寬度，靜靜地飄浮都留下

Answer 6

我幾乎總是隻使用溢出：隱藏在這些情況下，我的文字部分，它往往就像一個魅力;）

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