如何在浮动跨度内将一个浮动跨度包裹在另一个浮动跨度下方[包括图表]？
我有一个新闻源/聊天框。每个条目包含两个范围：#user 和#message。我希望#user 向左浮动，#message 向左浮动。如果 #message 导致行超出容器宽度，则 #message 应在 #user 下方换行，如下图所示。
默认情况下，如果#message 不适合位于同一行，则它会完全跳转到#user 下方。 我已经在每个元素上尝试过空白：nowrap，但这似乎也不起作用。
帮助？
I have a newsfeed/chat box. Each entry contains two spans: #user and #message. I would like #user to float left, and #message to float left upon it. If #message causes the row to exceed the container width, #message should wrap below #user, as shown in the diagram below.
By default #message jumps completely beneath #user if it does not fit on the same row.
I have tried whitespace:nowrap on each element but that doesn't seem to do the trick either.
Help?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
也许我遗漏了一些东西，但如果两个元素都是
display:inline这应该可以解决 #message 完全位于 #user 之下的问题。不需要漂浮任何东西。演示（没什么可看的）： http://jsfiddle.net/YK3R9/
随意使用语义标记我只是将它们用于演示，而不是 span 和 div。
如果您需要消息边框以显示其在绘图中的方式，请直接说明。我不确定它是视觉辅助还是您真正想要的渲染方式。当消息跨越多行时，简单地向元素添加边框看起来有点奇怪，因此我们可能需要一个辅助跨度。
编辑：看到你的注释，边界并不重要。
故事的寓意：这里不需要
float。Maybe I'm missing something, but if both elements are
display:inlinethis should solve the problem of #message going completely beneath #user. No need to float anything.Demo (not much to see): http://jsfiddle.net/YK3R9/
Feel free to use semantic markup instead of spans and divs, I just used them for the demo.
If you need the border on message to display the way it is in your drawing, just say so. I wasn't sure if it was a visual aid or the way you actually want it rendered. Simply adding the border to the element looks a bit weird when the message spans multiple lines, so we might need a helper span.
EDIT: Saw your note that borders don't matter.
Moral of the story: No need for
floathere.