与CSS的奇怪行为
答
浮动可能会导致这样的布局问题。由于您只在内容容器上使用它们,因此您可以从.search_summary_container
中删除float: left;
并添加display: inline-block;
。
演示:http://jsfiddle.net/ThinkingStiff/HSNNZ/
.search_summary_container {
height: auto;
width: 480px;
margin-top: 10px;
border: 1px solid #c1d1da;
display: inline-block;
}
+0
这个技巧。谢谢! – Paul 2012-01-14 20:27:07
答
添加明确:既您的页脚:
<div style="padding-top:10px;border-top: solid 1px #ff0000; font-size:11px; clear:both;">...</div>
解释:如果你有留下了浮动和浮动的权利,那么,来到后的内容会在你的花车去。所以通过清除,它会重置浮动并在浮动内容之后呈现它。
+0
相关提示谢谢,它修复了它。 – Paul 2012-01-14 20:26:46
正如下面的答案中提到,你只需要正确处理您的花车。 [将'clear:both'添加到页脚元素将解决此问题](http://jsfiddle.net/9wnSN/),但我建议阅读@H Bellamy的答案以了解如何使用浮动。 – 2012-01-14 19:52:36