CSS三列div -中间div固定宽度-外部div弹性



有人告诉我如何创建三列div与中间div 1040px宽度和左和右div是弹性的,所以他们收缩时,窗口调整大小。

有办法,我刚发现!: D

HTML:

<div id='siteHeadLeft'></div>
<div id='site'>
<div id='siteHeadRight'></div>
CSS:

#siteHeadRight{
    height:95px;
    float: right;
    margin-right: -500px;
    background-image:url(../IMG/menu_bg.png);
    background-repeat:repeat-x;
    width: 50%;
}
#site{
    float: left;
    width:1000px;
}
#siteHeadRight{
    height:95px;
    float: right;
    margin-right: -500px;
    background-image:url(../IMG/menu_bg.png);
    background-repeat:repeat-x;
    width: 50%;
}

您可以通过添加以下CSS:

div {
    width: 1040px;
    margin: 0px auto;
}

如果你想添加一个背景,你可以将它添加到div的父元素,或者页面的主体。

如果您的目标只是将中间的div居中,只需为其添加以下CSS属性:

width: 1040px;
margin: auto;
position: relative (or static. NOT absolute or fixed);

您可以为body元素设置一个平铺background-image,它将覆盖div两侧的区域。

编辑:这是一个非常接近你正在寻找的例子:http://jsfiddle.net/kqVFy/

最新更新