我一定醒得太久了。因为我发现自己陷入了一个简单的 CSS 问题。
我正在 Twitter Bootstrap 中构建一个网站，我试图让标题浮动在缩略图旁边，但标题不想跨越两行，它更喜欢打破浮动并捕捉到下方缩略图 div。
这个 jsFiddle 演示了这个问题.. 有人可以让我摆脱痛苦吗？
问问题
6341 次
2 回答
6
为什么会这样
您的第一个缩略图具有.pull_left您为其设置的类float:left。因此，您的缩略图和标题都是浮动的。由于标题很短，它的宽度小到可以到缩略图的左侧。
您的第二个缩略图没有类.pull_left并且没有浮动。但是您的第二个标题是，它的自然行为是向左移动，位于 HTML 中它之前的任何元素下方（包括第二个标题）。
解决方案
浮动缩略图并将270px(= 350px- 80px) 的宽度添加到.caption.
或者只浮动缩略图而不浮动.pull_left，然后你也不需要添加width: 270px。或者，您可以添加一个margin-left: 80pxto.caption以防止非常长的文本在缩略图下换行。甚至比80px在缩略图和标题之间留出一点空间略大。
于 2012-07-23T13:58:11.900 回答
1
你应该浮动你的缩略图而不是标题......标题内容将环绕你的图像......如果你想创建一个对峙，为你的标题添加边距。
于 2012-07-23T14:05:23.370 回答