我一定是醒了太久..因为我发现自己陷入了一个简单的CSS问题。
我正在Twitter Bootstrap中建立一个网站，我正试图让一个标题浮动到缩略图旁边，但是标题不想包裹两行，它更喜欢破坏浮动和快照到缩略图div下面。
This jsFiddle demonstrates the problem ..有人可以让我摆脱苦难吗？
答案 0 :(得分：6)
为什么会发生这种情况
您的第一个缩略图包含您为.pull_left设置的课程float:left。因此，缩略图和标题都会浮动。由于标题很短，其宽度足够小，可以到缩略图的左侧。
您的第二个缩略图没有类.pull_left，并且没有浮动。但是你的第二个标题是，它的自然行为是向左，在HTML之前的任何元素下面（包括第二个标题）。
<强>解
浮动缩略图并将270px（= 350px - 80px）的宽度添加到.caption。
或只浮动缩略图并且不浮动.pull_left，然后您也不需要添加width: 270px。您可以选择将margin-left: 80px添加到.caption，以防止在缩略图下包装真正长的文本。或者甚至比80px略大，以在缩略图和标题之间留出一点空间。
答案 1 :(得分：1)
你应该浮动你的缩略图而不是标题...标题内容将环绕你的图像...如果你想创建一个对峙，请为你的标题添加边距。