CSS Wordwrap не работает должным образом

Question

Основываясь на моем раннем thread Я пытаюсь использовать и понимать рекомендуемый способ выравнивания двух divs по горизонтали с использованием элемента переполнения.

С моим коротким текстом два divs выравниваются правильно, но когда я добавляю одиночный текст, он падает ниже изображения. Может ли кто-нибудь объяснить, почему это происходит и как я могу это исправить?

Мой JSFIDDLE

HTML:

<div class="container" style="overflow: hidden; width: 100%"> 
<div class="left"> 
    <img src="http://localhost/new/img/sampleimg.png" class="wall-thumb-small" /> 
</div> 
<div class="right"> 
    <div style="word-wrap: break-word;">Some long text here Some long text here Some long text here Some long text here Some long text here </div> 
</div> 
</div> 

CSS:

div.container { 
border: 1px solid #000000; 
overflow: hidden; 
width: 100%; 
} 

div.left { 
padding:5px; 
float: left; 
} 

div.right { 
float: left; 
} 

.thumb-small{ 
width:35px; 
height:35px; 
border: 1px solid #B6BCBF; 
} 

Answer 1

поплавков расширить, чтобы попытаться охватить их содержание. Они обычно расширяются до ширины области содержания, независимо от того, как они расположены. Вот почему он идет по новой линии, когда текст действительно длинный.

Что вы делаете, я считаю, что вы хотите изображение слева от какого-либо текста. Это делается при наличии внешнего набора области с clearfix CSS (всегда охватывают все поплавки):

.container { 
    overflow: hidden; 
    min-width: 1px; 
} 
/* IE7+ */ 
*+html .container { 
    min-height: 1%; 
} 

Тогда только плавать изображение слева. НЕ плавайте свой контент. При необходимости добавьте поля вокруг изображения. Так что-то вроде:

.left { 
    float: left; 
    margin: 0 10px 10px 0; /* 10px on right and bottom */ 
} 

Содержание в div будет действовать так, как вы ожидаете.

Answer 2

Удалите правило поплавка по длинному тексту (jsFiddle example). Когда элемент en перемещается после другого плавающего элемента, он не может находиться перед ним по вертикали.

<div> 
    <div style="word-wrap: break-word;">Some long text here Some long text here Some long text here Some long text here Some long text here </div> 
</div> 

Смотрите W3 для длинной версии:

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

Answer 3

Вам необходимо установить атрибут max-width, чтобы ограничить текстовую форму, занимая столько места, сколько доступно, и чтобы получить максимальное пространство, переходя к следующей строке.

http://jsfiddle.net/a6BbD/1/

<div class="container" style="overflow: hidden; width: 100%"> 
    <div class="left"> 
     <img src="http://localhost/new/img/sampleimg.png" class="thumb-small" /> 
    </div> 
    <div class="right"> 
    <div style="word-wrap: break-word;max-width:400px">Some long text here Some long text here Some long text here Some long text here Some long text here </div> 
    </div> 
</div> 

<br> 

<div class="container" style="overflow: hidden; width: 100%"> 
    <div class="left"> 
     <img src="http://localhost/new/img/sampleimg.png" class="thumb-small" /> 
    </div> 
    <div class="right"> 
    <div style="word-wrap: break-word;">Some short text here</div> 
    </div> 
</div> 

Answer 4

Удалить float:left; на правила, и он будет работать. Однако вы можете улучшить и протестировать, например, 6+.

Answer 5

Рекомендация говорит, что вы всегда должны устанавливать ширину на плавающие элементы. У этой ссылки есть прекрасный материал, чтобы понять поплавки ..

 http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/