css - 如何在 float 跨度内将 float 跨度包裹在另一个 float 跨度下方 [包括图表]？

Question

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

默认情况下，#message 完全跳到#user 下面，如果它不适合在同一行。我已经在每个元素上尝试了 whitespace:nowrap，但这似乎也没有用。

帮忙吗？

Answer 1

也许我遗漏了什么，但如果两个元素都是 display:inline 这应该可以解决 #message 完全位于 #user 之下的问题。无需 float 任何东西。

演示(没有太多可看的):http://jsfiddle.net/YK3R9/

请随意使用语义标记而不是 span 和 div，我只是将它们用于演示。

如果您需要消息上的边框以其在绘图中的方式显示，请直接说明。我不确定它是视觉辅助还是您实际想要呈现的方式。当消息跨越多行时，简单地向元素添加边框看起来有点奇怪，因此我们可能需要一个辅助 span。

编辑:看到您关于边界无关紧要的说明。

故事的寓意:这里不需要float。