Html 如何使浮动文本在多行上换行，而不是打断浮动？

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

我正在推特引导程序中构建一个站点，我试图在缩略图旁边添加一个标题，但标题不想在两行之间换行，它更喜欢打破浮动并捕捉到缩略图div下面

---

。。有人能帮我摆脱痛苦吗？

为什么会这样

您的第一个缩略图具有类

。向左拉

，您为该类设置了

float:left

。因此，缩略图和标题都是浮动的。由于标题很短，因此其宽度足够小，可以放在缩略图的左侧

您的第二个缩略图没有类

。向左拉
，并且不浮动。但是您的第二个标题是，它的自然行为是向左，在HTML中位于它之前的任何元素（包括第二个标题）下面


解决方案

浮动缩略图并将宽度
270px
（=
350px
-
80px
）添加到
标题中


或者只浮动缩略图，不浮动
。向左拉
，然后也不需要添加
宽度：270px
。您还可以选择在
标题下添加
左边距：80px
，以防止过长的文本在缩略图下环绕。甚至比
80px
稍大一点，以便在缩略图和标题之间留出一点空间

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

.
比我快。可能还需要在拇指图像的右边留一点边距。