初识负外边距在布局中的影响（3）：多栏布局

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wucdsg/article/details/78460988

1.引言

前面的两篇分别描述负边距影响布局的基础理论和两种著名的三列布局圣杯布局及双飞翼布局。本篇将继续介绍负外边距实现其他的布局：两列布局的右列自适应、两列布局的左列自适应、三列布局的右列自适应、三列布局的左列自适应。

2.两列布局之右列自适应

    <div class="container">
        <div class="left">左侧定宽</div>
        <div class="right">右侧自适应</div>
    </div>

    .container{
            height: 100px;
            margin: 30px;
            padding-left: 210px;
        }
        .left,.right{
            float: left;
            color: white;
            font-size: 18px;
            height: 100px;
        }
        .left{
            width: 200px;
            background-color: saddlebrown;
            margin-left: -210px;
        }
        .right{
            width: 100%;
            background-color: seagreen;
        }

3.两列布局之左列自适应

    <div class="container">
        <div class="left">左侧自适应</div>
        <div class="right">右侧定宽</div>
    </div>

    .container{
            height: 100px;
            margin: 30px;
            padding-right: 210px;
        }
        .left,.right{
            color: white;
            font-size: 18px;
            height: 100px;
        }
        .left{
            float: left;
            width: 100%;
            background-color: seagreen;
        }
        .right{
            float: right;
            width: 200px;
            background-color: saddlebrown;
            margin-right: -210px;
        }

4.三列布局的右列自适应

    <div class="container">
        <div class="fixcol-one">定宽1</div>
        <div class="fixcol-two">定宽2</div>
        <div class="autocol">自适应</div>
    </div>

    .container{
            height: 100px;
            margin: 30px;
            padding-right: 420px;
        }
        .fixcol-one,.fixcol-two,.autocol{
            color: white;
            font-size: 18px;
            height: 100px;
        }
        .fixcol-one{
            float: right;
            width: 200px;
            background-color: saddlebrown;
            margin-right: -420px;
        }
        .fixcol-two{
            float: right;
            width: 200px;
            background-color: saddlebrown;
            margin-right: -210px;
        }
        .autocol{
            width: 100%;
            background-color: seagreen;
            float: left;
        }

5.三列布局的左列自适应

    <div class="container">
        <div class="fixcol-one">定宽1</div>
        <div class="fixcol-two">定宽2</div>
        <div class="autocol">自适应</div>
    </div>

    .container{
            height: 100px;
            margin: 30px;
            padding-left: 420px;
        }
        .fixcol-one,.fixcol-two,.autocol{
            float: left;
            color: white;
            font-size: 18px;
            height: 100px;
        }
        .fixcol-one{
            width: 200px;
            background-color: saddlebrown;
            margin-left: -420px;
        }
        .fixcol-two{
            width: 200px;
            background-color: saddlebrown;
            margin-left: -210px;
        }
        .autocol{
            width: 100%;
            background-color: seagreen;
        }