Предотвратить поплавки от создания новой линии

Question

Я знаю, что этот вопрос был задан до (1, 2, 3, 4, 5, 6), но ни одно из этих решений не кажется, работает для меня.

HTML

<div class="wrapper"> 
    <img src="http://imgur.com/5dEdRvCs.png" /> 
    <div> 
     Lorem ipsum dolor sit amet, consectetur fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
    </div> 
</div> 

CSS

.wrapper > *{ 
    float: left; 
} 

jsFiddle

---

Я хотел бы как img и div под оберткой к floatleft, и для DIV со всем текстом, чтобы занять все оставшееся место на странице, как это:

Вместо этого он выглядит следующим образом:

---

Я попытался добавление overflow: hidden к обертке, пытался несколько width и min-width настроек, но безрезультатно.

Для выполнения этого в CSS должен быть некоторый относительно простой способ.

Answer 1

Просто плавайте изображение, и текст выравнивается вправо.

.wrapper img { 
    float:left; 
} 

fiddle.

Answer 2

Ваш код фактически приносит каждый элемент влево. Таким образом, изображение осталось, а текст также находится слева.

Если вы поместили ширину как на изображение, так и на текст, который будет работать для вас.

Вы можете попробовать:

.wrapper img { 
    width: 20%; 
} 
.wrapper > div { 
    width: 80%; 
} 

Тогда он будет работать, как вы хотели.

Answer 3

Другой способ сделать это состоит в использовании display: inline-block вместо float

Вот это скрипку:

fiddle