div背景自动延伸的解决
时间:2007-01-31 来源:whhw118
最近帮客户进行div重构的时候,遇到一个问题。该网站背景底色是橙色,中间区域是白色,也就是外面留出一截橙色的边边。这类网站布局可以有多种方式。我选择body的background是橙色,中间main层是白色底,这时需要考虑main层的背景自动延伸问题,在opera或者firefox如果你不定义高度的话,你会发现背景不会向下延伸,但是定义高度是极不方便的举措。还好阿捷帮我们解决了这个问题,http://www.w3cn.org/article/layout/2004/88.html,在main里面再加一个bg牟悖琧ss定义如下:
.main,.bg{
margin:0 auto;
width:980px;
background:#FFF;
}
.bg{float:left}
窍门在于bg这个层定义float: left;,因为float使层自动有宽和高的属性。(阿捷这么理解:)我也不知道怎么理解,反正这样做可以出来效果^_^
虽然bg是float:left,但由于main是margin:0 auto; 而且bg又包含在main里面,所以还是居中的。这样就解决了背景的延伸问题。
相关阅读 更多 +