看起来你正遭受着名的折叠容器问题。实际上,当您浮动容器元素的内容时,该元素将折叠到其中包含的最大未浮动元素的高度。如果容器的所有包含的元素和内容都是浮动的,则包含的元素将崩溃为空。
有两个选项可以解决这个问题,首先你可以像这样添加一些额外的标记......
<div id="container" style="background-color:pink" >
<div class="col1" style="float:left;>...</div>
<div class="col2" style="float:left; height:200px;>...</div>
<!-- This <br /> is an unfloated element that clears the floated elements above -->
<!-- thus acting as an HTML 'wedge' -->
<br style="clear:both;" />
</div>
...但这增加了额外的标记
或者,您可以使用这样的 CSS(假设您的原始代码)
#container:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
#container {display: inline-block;}
* html #container {height: 1%;}
#container {display: block;}
这使您根本不必添加任何额外的 HTML。
一个愉快的折衷方案是替换#container
为.cf
(或类似的 - 我使用 cf 表示“clearfix”)并将 .cf 类应用于任何遭受此问题的东西。
有关此技术的进一步说明,请尝试使用谷歌搜索 clearfix。上面的这个方法现在可能已经过时了——我只是从我的代码库中挖出来的 :)