html - 在容器内水平对齐 3divs

Question

如何在 css 中水平对齐一个 div 容器并在其中放置 3 个 div？看我的概念:http://postimg.org/image/9el748gst/

   <div id="container">
           <div id="header"> HEADER </div>
           <div id="content"> CONTENT </div>
           <div id="footer"> FOOTER </div> 
   </div>

抱歉，如果我重复发帖，我只是找不到正确的方法。谢谢!

Answer 1

大致上你可以使用这样的东西

演示:http://jsbin.com/zuxunavi/1/

HTML :

<div id="container">
  <div id="header"> HEADER </div>
  <div id="content"> CONTENT </div>
  <div id="footer"> FOOTER </div> 
</div>

CSS :

#container{
  min-height:100px;
  height:auto !important;
  width:100%;
  margin:0 auto;
  background:#CCC;
  padding:5px;
  overflow:auto
}

#header{
  height:50px;
  background:#FF0000;
  width:95%;
  margin:2.5%;
}
#content{
  height:200px;
  background:#25AAE2;
  width:95%;
  margin:2.5%;
}

#footer{
  height:50px;
  background:#8CC63E;
  width:95%;
  margin:2.5%;
}

您可以将此作为开发自己的 html 页面的引用。希望这会有所帮助。