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

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 (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%
}

Answer 2

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

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

.post-thumb img {
    float: left;
}

.post-content {
    float: left;
}

Редактировать: на самом деле вам не нужна ширина, просто сместить оба влево

Answer 3

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

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

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

Проверьте этот образец: http://jsfiddle.net/Epgvc/1/

Я просто перенес заголовок влево и добавил clear:both div в нижнюю часть ..

Answer 6

Решение с использованием дисплей: гибкий (с отзывчивым поведением): 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%;
    }
}

Answer 7

Установите ширину пост-контента и пост-большого пальца, чтобы получить макет из двух столбцов.