六种方式实现三栏布局

float浮动来实现

        .left {
            width: 300px;
            height: 100px;
            background-color: aquamarine;
            float: left;
        }
        .right {
            width: 300px;
            height: 100px;
             background-color: palevioletred;
            float: right;
        }
        .center {
            height: 100px;
            background-color: yellow;
            margin-left: 300px;
            margin-right: 300px;
        }
 
    <div class="left">左边</div>
    <div class="right">右边</div>
    <div class="center">中间</div>

绝对定位布局

        .container {
            position: relative;
        }
        .left {
            position: absolute;
            width: 300px;
            height: 100px;
            background-color: aquamarine;
            left: 0;
        }
        .right {
            position: absolute;
            width: 300px;
            height: 100px;
            background-color: coral;
            right: 0;
        }
        .main {
            position: absolute;
            background-color: brown;
            height: 100px;
            left: 300px;
            right: 300px;
        }
    <div class="container">
        <div class="left">左边</div>
        <div class="right">右边</div>
        <div class="main">中间</div>
    </div>

table布局

      .container {
            width: 100%;
            display: table;
        }
        .left {
            width: 300px;
            background-color: aquamarine;
            display: table-cell;
            height: 100px;
        }
        .main {
            background-color: brown;
            height: 100px;
            display: table-cell;
        }
        .right {
            width: 300px;
            background-color: coral;
            display: table-cell;
            height: 100px;
        }
    <div class="container">
        <div class="left">左边</div>
        <div class="main">中间</div>
        <div class="right">右边</div>
</div>

flex布局 

        .container {
            display: flex;
        }
        .left {
            width: 300px;
            height: 100px;
            background-color: aquamarine;
        }
        .main {
            flex: 1;
            background-color: brown;
            height: 100px;
        }
        .right {
            width: 300px;
            height: 100px;
            background-color: coral;
        }
    <div class="container">
    <div class="left">左边</div>
           <div class="main">中间</div>
           <div class="right">右边</div>
    </div> 

圣杯布局

        .container {
            margin-left: 300px;
            margin-right: 300px;
        }
        .main {
            width: 100%;
            height: 100px;
            background-color: brown;
            float: left;
            position: relative;
        }
        .left {
            width: 300px;
            height: 100px;
            background-color: aquamarine;
            margin-left: -100%;
            float: left;
            position: relative;
            left: -300px;
        }
        .right {
            width: 300px;
            height: 100px;
            background-color: coral;
            float: left;
            position: relative;
            margin-left: -300px;
            right: -300px;
        }
    <div class="container">
    <div class="main">中间</div>
    <div class="left">左边</div>
    <div class="right">右边</div>
   </div> 

双飞翼布局

        .container {
            overflow: hidden;
        }
        .box {
            width: 100%;
            background-color: brown;
            height: 100px;
            float: left;
        }
        .main {
            margin-left: 300px;
            margin-right: 300px;
        }
        .left {
            width: 300px;
            height: 100px;
            background-color: aquamarine;
            margin-left: -100%;
            float: left;
        }
        .right {
            width: 300px;
            height: 100px;
            background-color: coral;
            float: left;
            margin-left: -300px;
        }
    <div class="container">
        <div class="box">
                <div class="main">中间</div>
        </div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

 

posted @ 2021-02-20 14:19  是澄橙橙啊  阅读(79)  评论(0)    收藏  举报