防止浮动创建新行

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包装下float left,并与所有为占用所有剩余空间在页面上,这样的文字的div:

相反它看起来像这样:

---

我已经尝试添加overflow: hidden到包装器,尝试了一些width和min-width设置,但无济于事.

在CSS中必须有一些相对简单的方法来实现这一点.

Answer 1

只需浮动图像,文本就会向右对齐.

.wrapper img {
    float:left;
}

的小提琴.