我一定是醒得太久了..因为我发现自己陷入了一个简单的 CSS 问题。
我正在 Twitter Bootstrap 中构建一个网站，我试图让标题 float 在缩略图旁边，但标题不想跨两行，它更喜欢打破 float 和捕捉在缩略图 div 下方。
This jsFiddle demonstrates the problem .. 有人可以让我摆脱痛苦吗？
最佳答案
为什么会这样
您的第一个缩略图具有类 .pull_left，您为其设置了 float:left。因此，您的缩略图和标题都是 float 的。由于标题很短，它的宽度足够小，可以位于缩略图的左侧。
您的第二个缩略图没有类 .pull_left 并且没有 float 。但是你的第二个标题是，它的自然行为是向左移动，在 HTML 中它之前的任何元素下方(包括第二个标题)。
解决方案
float 缩略图并向 .caption 添加宽度 270px (=350px-80px) .
或者只 float 缩略图而不 float .pull_left 然后你也不需要添加 width: 270px。您可以选择将 margin-left: 80px 添加到 .caption 以防止非常长的文本在缩略图下换行。或者甚至比 80px 稍微大一点，以便在缩略图和标题之间留出一点空间。
关于html - 如何使 float 文本换行而不是打断 float ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11613902/