在不使用 div 宽度的情况下将图像和一些文本对齐在同一行上？

Question

好的，所以我试图在同一行上对齐图像（包含在 div 中）和一些文本（也包含在 div 中），而不设置文本的宽度，我该怎么做？这是我到目前为止所拥有的。

 <div id="container">

    <div id="image" style="float:left;">
        <img src="tree.png"  align="left"/>
    </div>

    <div id="texts" style="float:left;">
        A very long text(about 300 words)
    </div>

</div>

当文本很短时，图像和文本可以放在同一行，但我的文本很长，它会自动跳到图像下方的另一行。

基本上，现在是这样的：http: //puu.sh/MPw2 我想做这个：http: //puu.sh/MPvr

我一直在尝试解决这个问题大约 3 个小时，我很菜鸟，请帮忙？ :S

原文由 Maria 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果空间不可用，浮动将导致环绕。

您可以使用 display:inline 和 white-space:nowrap 来实现这一点。 小提琴

<div id="container" style="white-space:nowrap">

    <div id="image" style="display:inline;">
        <img src="tree.png"/>
    </div>

    <div id="texts" style="display:inline; white-space:nowrap;">
        A very long text(about 300 words)
    </div>

</div>​

原文由 Paul Fleming 发布，翻译遵循 CC BY-SA 3.0 许可协议