如何在浮動跨度內將浮動跨度包裹在另一個浮動跨度下方[圖表包含]？

我有一個新聞源/聊天框。每個條目包含兩個跨度：#user和#message。我希望#user向左浮動，並且#message向左浮動。如果#message導致該行超過容器寬度，則#message應該包裝在#user下面，如下圖所示。如何在浮動跨度內將浮動跨度包裹在另一個浮動跨度下方[圖表包含]？

默認情況下#message完全位於#user下方，如果它不適合在同一行上。我已經嘗試過空格：每個元素上的nowrap，但是這似乎也沒有辦法。

幫助？

diagram

2011-05-25 yajus

你想要這樣的邊界嗎？ – 2011-05-25 02:47:58

+1。 – alex 2011-05-25 02:48:04

邊框不需要像這樣可見。 – yajus 2011-05-25 02:51:41

也許我失去了一些東西，但如果兩個元素是display:inline這應該解決#message的#user下完全去的問題。無需浮動任何東西。

隨意使用語義標記，而不是跨度和div的，我只是用它們來演示。

如果您需要消息的邊框來顯示它在繪圖中的方式，請直接說出來。我不確定它是否是視覺輔助或您真正想要渲染的方式。當消息跨越多行時，簡單地將邊框添加到元素看起來有點奇怪，所以我們可能需要幫助者跨度。

編輯：看到你的筆記，邊界無關緊要。

道德故事：這裏不需要float。

2011-05-25 02:55:33

謝謝。我有一種感覺，這是基本的，因爲沒有人似乎有這個問題。只需要將float：none添加到#message。 – yajus 2011-05-25 03:24:24

是的，我在發帖前猶豫了很久，因爲我覺得這有點太簡單了。很高興你明白了，希望能解除一些「浮腫」:) – 2011-05-25 03:27:50

回答