html - 在居中容器内水平对齐 div

Question

如何在容器内对齐 4 个 div，在 css 中，如下图所示:http://postimg.org/image/w0k7wgdfb/这是我的 html，我想我需要另一个用于 DIV#2 和 DIV#3 的容器。

<div id="container">
   <div id="header"> DIV 1 </div>
    <div id="wraper"> <!-- WRAPER -->
      <div id="sidebar"> DIV 2 </div>
      <div id="content"> DIV 3 </div>
    </div> <!-- WRAPER -->
   <div id="footer"> DIV4 </div>
</div>

感谢您的帮助!

Answer 1

Solution 1 - Floats

居中对齐内容后，您可以对中间的两个 div 使用简单的 float 技巧:

CSS

html, body {
    height: 100%;
    width:100%;
    margin: 0;
    padding: 20px;
    box-sizing:border-box;
}
#container {
    text-align:center;
    width:500px;
    margin: 0 auto;
    height:100%;
    background:black;
    padding:20px;
    box-sizing:border-box;
}
#header {
    background:green;
    height:20%;
}
#wraper {
    height:60%;
    overflow:hidden;
}
#sidebar {
    width:20%;
    float:left;
    height:100%;
    background:red;
}
#content {
    overflow:hidden;
    background:blue;
    height:100%;
}
#footer {
    background:orange;
    height:20%;
}

Solution 2 - Display:Table

居中对齐内容后，您可以将表格布局应用于中间的div

CSS

html, body {
    height: 100%;
    width:100%;
    margin: 0;
    padding: 20px;
    box-sizing:border-box;
}
#container {
    text-align:center;
    width:500px;
    margin: 0 auto;
    height:100%;
    background:black;
    padding:20px;
    box-sizing:border-box;
}
#header {
    background:green;
    height:20%;
}
#wraper {
    height:60%;
    display:table;
    width:100%;
}
#sidebar {
    width:20%;
    display:table-cell;
    background:red;
}
#content {
    display:table-cell;
    background:blue;
}
#footer {
    background:orange;
    height:20%;
}