如何使浮动文本换行而不是打破浮动多行？

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。