CSS Float: плавающее изображение слева от текста

Для каждого почтового ящика, я хочу, чтобы эскиз плавал влево, а текст плавал вправо. Я не хочу, чтобы большой палец обертывал текст.

Вот мой 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;
}

Ответ 1

Это то, что вам нужно?

Я поменял название на тег h3 (header), потому что это более семантический выбор, чем использование 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%
}

Ответ 2

Просто нужно поместить оба оставшихся элемента:

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

.post-thumb img {
    float: left;
}

.post-content {
    float: left;
}

Изменить: на самом деле вам не нужна ширина, просто поплавайте слева

Ответ 3

Посмотрите этот пример: http://jsfiddle.net/Epgvc/1/

Я просто поместил заголовок влево и добавил div clear:both внизу.

Ответ 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>

Ответ 5

Я почти всегда просто использую переполнение: скрытый в своих текстовых элементах в таких ситуациях, он часто работает как шарм;)

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

Ответ 6

Задайте ширину post-content и post-thumb, чтобы получить двухколоночный макет.