с помощью CSS поплавка без ширины

Question

У меня есть HTML структура, как это:

<div class="content"> 
    <div class="icon"></div> 
    <div class="text">Some long message text which is wrapped in two lines.</div> 
    <div style="clear:both"></div> 
</div> 

и соответствующий CSS:

.content {width:300px; margin:30px auto; border:1px solid #000} 
.icon {width:40px; height:40px; background-color:maroon} 
.icon, .text {float:left} 

Я хочу, чтобы выровнять значок и текст componenent в одной строке без использования какого-либо родственника и значение абсолютной ширины.

Вот скрипка - http://jsfiddle.net/7kNSs/

Answer 1

Удалить CSS float формы собственности .text

Попробуйте Fiddle

HTML:

<div class="content"> 
    <div class="icon"></div> 
    <div class="text">Some long message text which is wrapped in two lines.</div> 
    <div style="clear:both"></div> 
</div> 

CSS:

.content 
     { 
     width:300px; margin:30px auto; border:1px solid #000; 
     } 
    .icon 
     { 
     width:40px; height:40px; background-color:maroon; float:left; 
     } 

Answer 2

удалить форма поплавка текст класс

HTML

<div class="content"> 
    <div class="icon"></div> 
    <div class="text">Some long message text which is wrapped in two lines.</div> 
    <div style="clear:both"></div> 
</div> 

CSS

.content {width:300px; margin:30px auto; border:1px solid #000} 
.icon {width:40px; height:40px; background-color:maroon;float:left;} 

Answer 3

Все, что вам нужно сделать, это вынуть .text DIV :

<div class="content"> 
    <div class="icon"></div> 
    Some long message text which is wrapped in two lines. 
    Some long message text which is wrapped in two lines. 
    Some long message text which is wrapped in two lines. 
    Some long message text which is wrapped in two lines. 
    <div style="clear:both"></div> 
</div> 

.content {width:300px; margin:30px auto; border:1px solid #000} 
.icon {width:40px; height:40px; background-color:maroon} 
.icon, .text {float:left} 

Проверьте раздвоенный скрипку: http://jsfiddle.net/Milanzor/tfrH6/

Answer 4

Попробуйте изменить эту линию .content {width:300px; margin:30px auto; border:1px solid #000} этим

#content { overflow: hidden;width:300px; margin:30px auto; border:1px solid #000}