如何使浮动文本覆盖多行而不是破坏浮动？答案

【问题标题】：How to make floating text wrap over multiple lines instead of breaking the float?如何使浮动文本覆盖多行而不是破坏浮动？
【发布时间】：2012-07-23 22:49:48
【问题描述】：

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

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

This jsFiddle demonstrates the problem.. 谁能帮我摆脱困境？

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

为什么会发生这种情况

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

您的第二个缩略图没有 .pull_left 类，也没有浮动。但是您的第二个标题是，它的自然行为是向左移动，位于 HTML 中它之前的任何元素下方（包括第二个标题）。

解决方案

浮动缩略图并将270px (=350px-80px) 的宽度添加到.caption。

Demo

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

Demo // Demo with margin

【讨论】：

打败我。拇指图像上可能也需要一点边距。 jsfiddle.net/jtwJe/5

【解决方案2】：

您应该浮动您的缩略图而不是标题...标题内容将环绕您的图像...如果您希望创建一个对峙，请为您的标题添加边距。

Example here.

【讨论】：