如何使浮動文本換行而不是打破浮動多行？

Question

我一定覺得太久了..因爲我發現自己陷入了一個簡單的CSS問題。

我在Twitter Bootstrap中建立了一個站點，我試圖讓一個標題在縮略圖旁邊浮動，但標題不想跨越兩行，它傾向於打破浮動並且捕捉到縮略圖div下方。

This jsFiddle demonstrates the problem ..有人能讓我擺脫我的苦難嗎？

Answer 1

爲什麼出現這種情況

你的第一個縮略圖具有用於設置float:left類.pull_left。因此，您的縮略圖和標題都是浮動的。由於標題很短，它的寬度足夠小，可以放到縮略圖的左側。

您的第二個縮略圖沒有類.pull_left而且沒有浮動。但是你的第二個標題是，它的自然行爲是在HTML中的任何元素之下（包括第二個標題）到左邊。

---

SOLUTIONS

浮法縮略圖和270px（= 350px - 80px）的寬度添加到.caption。

Demo

或浮動只是縮略圖，不浮.pull_left然後你不需要添加任何width: 270px。或者，您可以將margin-left: 80px添加到.caption以防止在縮略圖下打包真正長的文本。甚至略大於80px以在縮略圖和標題之間留有一點空隙。

Demo // Demo with margin

Answer 2

你應該浮動的縮略圖，而不是標題...標題內容將環繞你的形象......如果你想創建一個對峙，增加保證金對您的字幕。

Example here。