it-swarm.com.ru

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

Это то, что вы после?

  • Я изменил ваш заголовок на тег 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%
}
79
thirtydot

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

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

.post-thumb img {
    float: left;
}

.post-content {
    float: left;
}

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

4
Demelziraptor

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

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

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

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

1
Dutchie432

.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

1
dmackerman

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

0
quarkdown27