在不使用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

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>?

Answer 2

尝试

<img src="assets/img/logo.png" align="left" />
Text Goes here

简单的HTML属性:

align="left"

属性的其他值:

• 底部
• 剩下
• 中间
• 对
• 最佳

Answer 3

我知道这个问题已经超过 6 年了，但我仍然想分享我使用表格的方法，这不需要任何 CSS。

<table><tr><td><img src="loading.gif"></td><td> Loading...</td></tr></table>

干杯! 快乐编码