Невозможно выровнять изображение и текст друг под другом

Я пытаюсь выполнить смехотворную основную задачу, но не могу ее пропустить. Я не могу понять, как сделать второе изображение прямо под первым. Это расстраивает !!Невозможно выровнять изображение и текст друг под другом

скрипку здесь: http://jsfiddle.net/dvir0776/v9v512tm/

<div class="comment"><img src="d.jpg" style="width:13%; margin-right: 12px; float:left;"> 
    <div style="text-align:left; font-size:8pt;"> 
    <h5 style="margin-bottom:0;">Chris Fanelli</h5> 
    comment comment comment comment comment comment comment comment comment comment!</div> 
</div> 

<div class="comment"><img src="d.jpg" style="width:13%; margin-right: 12px; float:left;"> 
    <div style="text-align:left; font-size:8pt;"> 
    <h5 style="margin-bottom:0;">Chris Fanelli</h5> 
    comment comment comment comment comment comment comment comment comment comment!</div> 
</div>

Любой щипок, чтобы исправить это будет здорово.

источник

2014-09-21 david

расчистке поплавков в путь, но как насчет очистить разметку, и отделить CSS [как в этом примере ] (http://jsfiddle.net/2k9k5jgg/2/)? – misterManSam

Линейные коробки обертывают плавающие элементы. Вы должны clear the float в конце контейнера, .comment.

Либо по traditional way:

<div class="comment"> 
    <img src="d.jpg" style="width:13%; margin-right: 12px; float:left;" /> 
    <!-- ... --> 
    <div class="clearfix"></div> 
</div>

.clearfix { clear: both; }

Или something newer:

.comment:after { 
    content: ""; 
    display: block; 
    clear:both; 
}

источник

2014-09-21 07:05:49

Комментарии собираются складываться друг на друга, так почему бы не просто «.comment {clear: left; } ' – misterManSam

@misterManSam Тогда что будет с остальной частью потока документов? http://jsfiddle.net/hashem/v9v512tm/4/ –

Ну, это не [действительно проблема, чтобы очистить поплавок еще раз] (http://jsfiddle.net/v9v512tm/6/), и комментарии часто появляются на в нижней части документа, оставляя, возможно, только нижний колонтитул, чтобы очистить. Я бы сказал, что это жизнеспособный вариант. – misterManSam

Все, что вам нужно сделать, это добавить clearfix класс к comment дел.

.clearfix:after { 
visibility: hidden; 
display: block; 
font-size: 0; 
content: " "; 
clear: both; 
height: 0;

}

DEMO

источник

2014-09-21 07:06:16 karan3112

Добавить "clear:left" стиль 2 DIV

<div class="comment"><img src="d.jpg" style="width:13%; margin-right: 12px; float:left;"> 
     <div style="text-align:left; font-size:8pt;"> 
     <h5 style="margin-bottom:0;">Chris Fanelli</h5> 
     comment comment comment comment comment comment comment comment comment comment!</div> 
     </div> 

<div class="comment" style="clear:left"><img src="d.jpg" style="width:13%; margin-right: 12px; float:left;"> 
     <div style="text-align:left; font-size:8pt;"> 
     <h5 style="margin-bottom:0;">Chris Fanelli</h5> 
     comment comment comment comment comment comment comment comment comment comment!</div> 
     </div>

источник

2014-09-21 07:06:23

Эти ответы должны работать, но here является альтернативой. Он использует display: table-row;. Я добавляю padding-top: 10px; только для эстетики. Контейнер может не понадобиться.

CSS

.container { 
    width: Auto; 
} 
.comment { 
    display: table-row; 
    padding-top: 10px; 
} 
.comment img { 
    display: table-row; 
    padding-top: 10px; 
}

HTML

<div class="container"> 
    <div class="comment"> 
     <img src="d.jpg" style="width:13%; margin-right: 12px; float:left;"> 
     <div style="text-align:left; font-size:8pt;"> 
      <h5 style="margin-bottom:0;">Chris Fanelli</h5> 
comment comment comment comment comment comment comment comment comment comment!</div> 
    </div> 
    <div class="comment"> 
     <img src="d.jpg" style="width:13%; margin-right: 12px; float:left;"> 
     <div style="text-align:left; font-size:8pt;"> 
      <h5 style="margin-bottom:0;">Chris Fanelli</h5> 
comment comment comment comment comment comment comment comment comment comment!</div> 
    </div> 
</div>

источник

2014-09-21 07:10:58 Leto

Невозможно выровнять изображение и текст друг под другом

ответ

Смежные вопросы