网页div布局|单列布局-宽度自适应-内容居中

基本思路:

1. 头部,尾部单独放在一个独立的容器中，仅设置高度即可
2. 头部,底部的内容区仍然和主体等宽
3. 主体仍放在一个单独的容器中,并设置水平居中
4. CSS样式不用修改,只需要调整一个DOM结构

HTML结构

<div class="header">
<div class="container">头部</div>
</div>
<div class="main">
<div class="container">主体</div>
</div>
<div class="footer">
<div class="container">底部</div>
</div>

CSS样式

<style type="text/css">
.container{
max-width: 960px;/*设置最大宽度为960px*/
margin: 0 auto;/*设置内部的块级元素水平居中*/
}
.header{
height: 50px;
background-color: aqua
}
.main{
height: 600px;
background-color: royalblue
}
.footer{
height: 50px;
background-color: saddlebrown
}
</style>

转载请注明：大灰牛博客 » 网页div布局|单列布局-宽度自适应-内容居中