五种方法实现三栏布局

html5

浏览数:104

2019-9-22

AD:资源代下载服务

题目:用五种方式实现三栏布局。高度已知,左右两边宽度300px。中间自适应。
看到这个题目,我们首先会想起2-3种解决办法。今天我们就来挖一挖到底有多少种方法实现三栏布局。
以下代码可以直接复制运行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏布局</title>
    <style>
        html * {
            margin: 0;
            padding: 0;
        }
        /*这里写一些公共的样式*/
        .layout{
            margin-bottom: 10px;
            width: 100%;
        }
        .layout>div{
            min-height: 100px;
        }
        .layout>.left{
            background-color: red;
            width: 300px;
        }
        .layout>.center{
            background-color: black;
        }
        .layout>.right{
            background-color: blue;
            width: 300px;
        }
    </style>
</head>
<body>
<!--1.float布局-->
<style>
    .float .left{
        float: left;
    }
    .float .right{
        float: right;
    }
</style>
<section class="layout float">
    <div class="left"></div>
    <!--注意:这里要把right写在center之前-->
    <div class="right"></div>
    <div class="center"></div>
</section>
<!--2.absolute布局-->
<style>
    .absolute{
        height: 100px;
    }
    .absolute>div{
        position: absolute;
    }
    .absolute .left{
        left: 0;
    }
    .absolute .center{
        left: 300px;
        right: 300px;
    }
    .absolute .right{
        right: 0;
    }
</style>
<section class="layout absolute">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</section>
<!--3.flex布局-->
<style>
    .flex{
        display: flex;
    }
    .flex .center{
       flex: 1;
    }
</style>
<section class="layout flex">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</section>
<!--4.table布局-->
<style>
    .table{
        display: table;
        height: 100px;
    }
    .table>div{
        display: table-cell;
    }
</style>
<!--表格布局把每个div当成一个表格,所以同一行的表格高度始终是相等的-->
<section class="layout table">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</section>
<!--5.grid布局-->
<style>
    .grid{
        display: grid;
        grid-template-columns: 300px auto 300px;
    }
</style>
<section class="layout grid">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</section>
</body>
</html>

这里前三种是我们经常用到的布局方式,后两种不常用。table布局虽然不被推荐使用,但是有些时候还是很好用的。grid布局就是把容器分成几行几列的格子,和flex布局类似,但比flex要复杂一些。有兴趣的话可以自己去查阅一下具体用法。

作者:Hison