三栏布局的实现方法

三栏布局的实现方法有:

1. absolute 布局
2. float 布局
3. flex 布局
4. grid 布局
5. table 布局

1.使用absolute

代码如下:

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

css代码:

        * {
            margin:0;
            padding:0;
        }

        .content {
            position: relative;
        }
        .left,.right {
            width: 200px;
            height: 300px;
            border:1px solid seagreen;
        }

        .content > .left {
            position: absolute;
            left:0;
        }

        .content > .center {
            position: absolute;
            left:200px;
            right: 200px;
            height: 300px;
            border:1px solid seagreen;
        }

        .content > .right {
            position: absolute;
            right:0;
        }

2. 使用float

html代码如下:

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

css代码如下:

        .left {
            float: left;
            width: 200px;
            background: green;
        }

        .center {
            overflow: hidden;
            background: pink;
        }

        .right {
            float: right;
            width: 200px;
            background: darkgray;
        }

3. flex布局

html代码如下:

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

css代码如下:

        .content {
            display: flex;
            width: 100%;
            height: 300px;
        }

        .left {
            width: 300px;
            height: 300px;
            background-color: green;
        }

        .center {
            flex-grow: 1;
            height: 300px;
            background-color: #999;
        }

        .right {
            width: 300px;
            height: 300px;
            background-color: pink;
        }

4. grid 布局

html代码如下:

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

        .content {
            display: grid;
            grid-template-columns: 200px auto 200px;
            width: 100%;
        }

        .left {
            height: 300px;
            background-color: green;
        }

        .center {
            flex-grow: 1;
            height: 300px;
            background-color: #999;
        }

        .right {
            height: 300px;
            background-color: pink;
        }

5.table布局

html代码:

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

css代码:

        .content {
            display: table;
            width: 100%;
        }

        .left,
        .center,
        .right {
            display: table-cell;
            height: 300px;
        }

        .left {
            width: 300px;
            background-color: green;
        }

        .center {
            width: auto;
            background-color: #999;
        }

        .right {
            width: 300px;
            background-color: pink;
        }