三列布局（圣杯双飞翼）

Posted 2020-11-13 inundate

圣杯布局：两边固定，中间自适应；

　　元素代码：

<div class="box">
        <div class="content">
           
        </div>
        <div class="left">左</div>
        <div class="right">右</div>
  </div>

　　布局代码：

.box {

            margin: 0px auto;

            width: 800px;

            height: 200px;

            border: 1px solid red;

            padding: 0 200px;

        }

　　　　　给父盒子设置padding来让content的宽度值变小，给左右侧留出位置。

        .box>div {

            float: left;

            height: 200px;

        }

        .content {

            width: 100%;

            background-color: antiquewhite

        }

        .left {

            width: 200px;

            height: 200px;

            background: cadetblue;

            margin-left: -100%;

            position: relative;

            left: -200px;

        }

        .right {

            width: 200px;

            background: cadetblue;

            margin-left: -200px;

            position: relative;

            left: 200px;

        }

　　　　　*/使用padding后，因为父容器没有设置宽度，所以内容区域width变小了，main的宽度就小了，两边留出了足够的位置，但是浮动不能越过父容器的padding区域，所以我们还需要用相对位置来移动左右栏的位置。/*

双飞翼布局：

　　给中间部分在套上一层容器，这样做以后，大的容器就不再需要设置padding值，左右栏盒子也不用再设置相对布局，代码精简了很多，而且不会出现变的特别窄布局会乱掉的问题。

<div class="box">
        <div class="cont">
            <div class="center">
                内容
            </div>
        </div>
        <div class="left">
            左
        </div>
        <div class="right">
            右
        </div>
    </div>

布局代码：

    .box{
            width: 800px;
            height: 400px;
            border:1px solid red;
            margin:100px auto;
        }
        .box>div{
            float: left;
            height: 400px;
        }
        .cont{
            width: 100%;

        }
        .center{
            background: red;
            margin: 0 200px;
            height: 400px;
        }
        .left{
            background: blue;
            width: 200px;
            margin-left: -100%;
        }
        .right{
            background: pink;
            width: 200px;
            margin-left: -200px;
        }

构造效果是这样，