Question

问题

据我所知，清除浮动主要适用于父项目。但是在帖子缩略图之后我的模板中存在一个问题，其中clear: both作用于整个内容包装器。在不清除浮动的情况下，细线将粘贴到缩略图右侧的文本。

我想要的是将缩略图或文本下方的45px行（取决于高度更高）。

预览

请 look at this sample 。

任何帮助都将受到高度赞赏！

Answer 1

只需使用overflow: hidden;黑客来结束float。

将CSS overflow: hidden添加到父元素。

修改

作为奖励。如果你想使用一些奇特的CSS3东西（比如drophadows），上面的黑客就会失败。

有一个新的黑客：http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack/

虽然这个黑客也有一些问题。

你需要一些时间才能认真使用花哨的CSS3。

你可以使用它，但浏览器支持很长时间都会很差：）

Answer 2

我建议使用.clear类，可以在任何地方使用它来清除浮点数，它看起来像这样：

.clear { height:0; overflow:hidden; clear:both; }

将其插入浮动元素下以清除它们，

Answer 3

将缩略图div左移，文本div也离开。在他们之后，设置一个div

<div style="clear:both"><!-- --></div>

包含所有这3个div的div将占用最高div的长度。

<强>基本上

<div class="container">
   <div class="thumbnail" style="float:left; width: 50%;"><img src="whatever.png" /></div>
   <div class="text" style="float:left; width: 50%">My text</div>
   <div style="clear:both;"><!-- --></div>
</div>

为什么这一点很明确：全球行动？

问题

预览

3 个答案: