div的文本位置内联

Question

这是现场演示：http://jsfiddle.net/9Y7Cm/5/

一切都很好，直到文本宽度高于div宽度。

如果您要在那里添加一些文字，该行将会中断，文本将显示在图像下方而不是图像旁边（正如您在我的第一个小提琴中看到的那样）。

在这里你可以看到发生了什么，它的文字宽度高于div容器宽度：

http://jsfiddle.net/9Y7Cm/12/

有没有办法解决这个问题？

Answer 1

只需从display:inline-block;元素（jsFiddle example）的CSS中删除span。

有关display:inline-block的更多信息。

  

inline-block：此值使元素生成内联级块容器。内联块的内部被格式化为块框，元素本身被格式化为原子内联级框。

Answer 2

给右侧内容一个宽度并向右浮动，如下所示：

http://jsfiddle.net/9Y7Cm/14/

为了获得更清晰的结果，我建议您使用类和宽度将内容的左右两侧分开，然后将它们浮动以将它们并排放置。

Answer 3

问题在于display:inline-block的跨度。删除它，文本将在同一行