中间自适应两边固定宽度布局

绝对定位法

<style>
        * {
            margin: 0;
            box-sizing: border-box;
        }
        .wrap {
            position: relative;
        }
        .left {
            position: absolute;
            left: 0;
            top: 0;
            width: 100px;
            height: 50px;
            background: orange;
        }
        .content {
            width: 100%;
            height: 100px;
            background: blue;
            margin: 0 100px;
        }
        .right {
            position: absolute;
            right: 0;
            top: 0;
            width: 100px;
            height: 150px;
            background: green;
        }
</style>

<div class="wrap">
   <div class="col left">left</div>
   <div class="col content">content</div>
   <div class="col right">right</div>
</div>

圣杯布局

1 给出出HTML结构

<div class="wrap">
   <div class="content">content</div>
   <div class="left">left</div>
   <div class="right">right</div>
</div>

写结构的时候要注意，父元素的的三栏务必先写中间盒子。因为中间盒子是要被优先渲染嘛~并且设置其自适应，也就是width:100%。

2 给出每个盒子的样式

* {
    margin: 0;
}
body {
    padding: 20px;
}
.wrap {
    color: #fff;
 }
 .left {
    width: 100px;
    height: 80px;
    background: orange;
    float: left;
}
.content {
    width: 100%;
    height: 80px;
    background: blue;
    float: left;
}
.right {
    width: 100px;
    height: 80px;
    background: green;
    float: left;
}

此时的效果图如下

第二步

3 让左边left盒子上去
设置其左边距为负的中间盒子的宽度

.left {
  margin-left:-100%;
}

4 让右边的盒子上去
设置其左边距为负的自己的宽度

.right {
  margin-left: -100px;
}

发现content的部分内容被left和right给遮住了，接下的任务就是让其完全显示

5 让中间盒子的宽度为屏幕宽度减去left和right盒子的宽度

.wrap {
  padding: 0 100px;
}

6 移动left和right到相应的位置

.left { 
    position: relative;
    left: -100px;
}
.right{ 
    position: relative;
    right: -100px;
}

圣杯布局终版

双飞翼布局

双飞翼布局和圣杯布局，前半部分是一样的，也就是1-4都是一样的，唯一的区别在于如何让content中的内容完全呈现出来。圣杯布局采取的是给最外层容器添加padding，然后left, right采取相对定位使其移动到对应的地方，而双飞翼布局则是给content添加一个内层容器来包括真正的内容，然后内层容器采取margin来完全显示内容。

<div class="wrap">
   <div class="content">
    <div class="inner">content</div>
   </div>
   <div class="left">left</div>
   <div class="right">right</div>
</div>

在4的基础上增加如下的css

.inner {
   margin: 0 100px;
}

贪玩儿的小灰灰感谢您的耐心阅读，如果有问题记得留言哦 =^_=

公众号 | 贪玩儿的小灰灰

• 每周都会推送原创、有用、有趣的旅行图文和攻略。