css - 如何使 3 列 Css Div 站点居中？

Question

我的网站有一个 100% 宽度的页眉和页脚，以及 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