0

我对这些代码片段有一些问题:

CSS:

#wrapper{
    width: 600px;
    background: gray;
}

#left{
    float: left;
    width: 150px;
    height: 80px;
    background: red;
}

#right{
    float: left;
    width: 450px;
    height: 150px;
    background: yellow;
}

HTML:

<div id="wrapper">
    <div id="left"></div>
    <div id="right"></div>
</div>

左边的高度是 80px,右边的高度是 150px。我希望这件事看起来像这样:http: //img408.imageshack.us/img408/9978/dream.th.jpg 以上来自 IE 的屏幕截图,当我使用 IE 时,这些片段完美运行。但是当我使用其他浏览器(opera、FF、Safari、Chrome)时,我得到了这个:http: //img408.imageshack.us/img408/869/fact.th.jpg

这并不酷......我希望父(#wrapper)元素的高度获得两个孩子的更大高度。

4

6 回答 6

2

CSS

#wrapper:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;}
于 2011-11-04T22:05:13.280 回答
1

这是 IE 中的一个错误。

包含浮点数解释了为什么您会看到这种行为,而包含浮点数的方法提供了比添加额外标记更好的解决方案。

于 2009-10-26T17:24:41.083 回答
0

当两个 div(s) 漂浮在一个没有固定高度的容器中(或者它的高度小于包含的 div(s) 的最大高度)时,您的容器会折叠成一行像素并且您的浮动 div(s)溢出容器。

要强制容器包含两个 div,您需要在关闭容器之前清除两个浮动!换句话说 ....

CSS

<style>
#wrapper{
    width: 600px;
    background: gray;
}

#left{
    float: left;
    width: 150px;
    height: 80px;
    background: red;
}

#right{
    float: left;
    width: 450px;
    height: 150px;
    background: yellow;
}

.clearer{ clear: both;}
</style>

HTML

<div id="wrapper">
    <div id="left"></div>
    <div id="right"></div>
    <div class="clearer"></div>
</div>
于 2009-10-26T17:37:46.673 回答
0

感谢大卫的快速回答。我还没有阅读你写的所有内容(两个链接),但我在第二个链接上遇到了一个解决方案。我添加了一个额外的 div,带有“clear:both;” 到容器,它正在工作!谢谢。Matt Ball:谢谢,但我希望这个东西能够动态增长

于 2009-10-26T17:37:30.700 回答
0

我发现的最佳解决方案与上面的 Rodrigo 类似,但内容中不需要空格字符(因此也不需要指定字体大小)。如果你把它变成一个类,你可以将它应用到任何容器块,而不仅仅是你的包装器。(我也觉得最好不要设置 ID 样式,但这是一个不同的问题。)

.clearfix:after {
    clear: both;
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
}
*:first-child+html .clearfix { /* Optional fix for IE7 */
    zoom: 1; 
}
于 2014-02-17T03:22:09.683 回答
0

只需将父级的溢出样式设置为可见以外的任何内容,它将环绕子内容。

于 2012-04-12T21:23:28.267 回答