Chr*_*ris 3 html css twitter-bootstrap
我一定是醒了太久了...因为我发现自己陷入了一个简单的CSS问题.
我正在Twitter Bootstrap中建立一个网站,我试图让一个标题浮动到缩略图旁边,但标题不想包裹两行,它更喜欢打破浮动并捕捉到下面的thumbnail div.
这个jsFiddle证明了这个问题 ..有人可以请我摆脱我的痛苦吗？
为什么会这样
您的第一个缩略图包含.pull_left您为其设置的类float:left.因此,缩略图和标题都会浮动.由于标题很短,其宽度足够小,可以到缩略图的左侧.
您的第二个缩略图没有该类.pull_left,并且没有浮动.但是你的第二个标题是,它的自然行为是向左,在HTML之前的任何元素下面(包括第二个标题).
解决方案
浮动缩略图并将宽度270px(= 350px- 80px)添加到.caption.
或者只浮动缩略图并且不浮动.pull_left,然后您也不需要添加width: 270px任何一个.您可以选择添加一个margin-left: 80pxto .caption,以防止在缩略图下包装真正长的文本.甚至比80px缩略图和标题之间有一点空间还要大一些.