Question

我的网站有100％宽度标题＆amp;页脚和3列。列需要全部固定宽度，但在页面的中心。

HTML

<div id="Table_01">
    <div id="Header"></div>
    <span id="LeftCol">Left Col </span>
    <span id="MidCol">Middle    </span>
    <span id="RightCol">Right Col   </span>
    <div id="Footer">Footer</div>
</div>

CSS

 #Table_01 {
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
}    
#Header {
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:42px;
    background-image: url("images/Header.gif");
}
#LeftCol {
    position:absolute;
    left:0px;
    top:42px;
    width:300px;
    height:422px;
    text-align:center;
    border:2px solid;
}    
#MidCol {
    position:absolute;
    left:300px;
    top:42px;
    width:550px;
    height:422px;
    text-align:center;
    border:2px solid;
}    
#RightCol {
    position:absolute;
    left:850px;
    top:42px;
    width:300px;
    height:422px;
    text-align:center;
    border:2px solid;
}    
#Footer {
    position:absolute;
    left:0px;
    top:464px;
    width:1000px;
    height:1536px;
}

JSFIDDLE

Answer 1

您需要的是将position:relative和margin:0 auto应用于容器。

添加容器div：

.container {
    width:1150px;
    margin:0 auto;
    position:relative;
}

查看更新的JSFIDDLE

如何集中3列Css Div网站？

1 个答案: