Question

有人可以告诉我如何使用中间div 1040px宽度创建三个列div，左右div是弹性的，因此当调整窗口大小时它们会收缩。这将使中间div始终居中。

Answer 1

有一种方法，我只是找出来！：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%;
}

Answer 2

如果你的目标只是让中间div居中，只需给它以下的CSS属性：

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

您可以为background-image元素设置平铺body，以覆盖div两侧的区域。

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

Answer 3

只需添加此CSS即可将固定宽度的div居中：

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

如果要添加背景，可以将其添加到div的父元素或页面正文中。

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

3 个答案: