我有一个新闻源/聊天框。每个条目包含两个跨度：#user和#message。我希望#user向左浮动，而#message向左浮动。如果#message导致行超出容器宽度，则#message应该包含在#user下面，如下图所示。
默认情况下，如果#user不适合同一行，则#message完全跳转到#user下方。我已经尝试了空白：nowrap在每个元素上，但似乎也没有做到这一点。
救命？
也许我错过了一些东西，但如果两个元素都是display:inline，这应该可以解决#message完全在#user下面的问题。不需要漂浮任何东西。
演示（不多见）：http://jsfiddle.net/YK3R9/
随意使用语义标记而不是跨度和div，我只是将它们用于演示。
如果您需要消息上的边框来显示它在绘图中的方式，请说明。我不确定它是视觉辅助还是你想要渲染的方式。当消息跨越多行时，简单地向元素添加边框看起来有点奇怪，因此我们可能需要一个辅助跨度。
编辑：看到边框无关紧要。
故事的道德：这里不需要float。