防止浮动创建新行

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;
}

fiddle。

Answer 2

您的代码实际上将每个元素都留下了。因此，图像被保留，文本也在左侧。

如果您在图像和文字上放置一个适合您的宽度。

您可以尝试：

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

然后它会按你的意愿工作。

Answer 3

另一种方法是使用display: inline-block代替float

这是小提琴：

fiddle