如何在浮动跨度内将浮动跨度包裹在另一个浮动跨度下方[图表包含]？

Question

我有一个新闻源/聊天框。每个条目包含两个跨度：#user和#message。我希望#user向左浮动，并且#message向左浮动。如果#message导致该行超过容器宽度，则#message应该包装在#user下面，如下图所示。

默认情况下#message完全位于#user下方，如果它不适合在同一行上。 我已经尝试过空格：每个元素上的nowrap，但是这似乎也没有办法。

帮助？

Answer 1

也许我失去了一些东西，但如果两个元素是display:inline这应该解决#message的#user下完全去的问题。无需浮动任何东西。

演示（不多见）：http://jsfiddle.net/YK3R9/

随意使用语义标记，而不是跨度和div的，我只是用它们来演示。

如果您需要消息的边框来显示它在绘图中的方式，请直接说出来。我不确定它是否是视觉辅助或您真正想要渲染的方式。当消息跨越多行时，简单地将边框添加到元素看起来有点奇怪，所以我们可能需要帮助者跨度。

编辑：看到你的笔记，边界无关紧要。

道德故事：这里不需要float。