html - 如何使 float 文本换行而不是打断 float ？

Question

我一定是醒得太久了..因为我发现自己陷入了一个简单的 CSS 问题。

我正在 Twitter Bootstrap 中构建一个网站，我试图让标题 float 在缩略图旁边，但标题不想跨两行，它更喜欢打破 float 和捕捉在缩略图 div 下方。

This jsFiddle demonstrates the problem .. 有人可以让我摆脱痛苦吗？

Answer 1

为什么会这样

您的第一个缩略图具有类 .pull_left，您为其设置了 float:left。因此，您的缩略图和标题都是 float 的。由于标题很短，它的宽度足够小，可以位于缩略图的左侧。

您的第二个缩略图没有类 .pull_left 并且没有 float 。但是你的第二个标题是，它的自然行为是向左移动，在 HTML 中它之前的任何元素下方(包括第二个标题)。

---

解决方案

float 缩略图并向 .caption 添加宽度 270px (=350px-80px) .

Demo

或者只 float 缩略图而不 float .pull_left 然后你也不需要添加 width: 270px。您可以选择将 margin-left: 80px 添加到 .caption 以防止非常长的文本在缩略图下换行。或者甚至比 80px 稍微大一点，以便在缩略图和标题之间留出一点空间。

Demo//Demo with margin