当前位置： 移动技术网 > IT编程>网页制作>CSS > css布局之圣杯篇

css布局之圣杯篇

2018年03月01日  | 移动技术网IT编程  | 我要评论

 

 

html：

<div class="header">我是头部哦</div>
      <div class="container">
              <div class="center">
                     我要适应中间
              </div>
              <div class="left">
                      我固定左边哦
              </div>
              <div class="right">
                      我固定右边哦
             </div>
     </div>
<div class="footer">我是脚部哦</div>

css：

.header {
    width: 100%;
    background: red;
    height: 50px;
}
.container {
    clear: both;
    overflow: hidden;
    padding: 0 130px 0 100px;
}
.container .left {
    width: 100px;
    float: left;
    background: orange;
    height: 100px;
    margin-left: -100%;
    position: relative;
    left: -100px;
}
.container .center {
    background: green;
    height: 100px;
    float: left;
    width: 100%;
}
.container .right {
    width: 130px;
    float: left;
    background: blue;
    height: 100px;
    margin-left: -130px;
    position: relative;
    right: -130px;
}
.footer {
    width: 100%;
    background: red;
    height: 50px;
}

　效果图：

主要思路：center-->left-->right。

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网