css 实现三列布局

float布局: float + margin
position布局: position + left + right
table布局: table+ table-cell
flex布局: flex
grid布局: 略

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用float实现三列布局[注意:中间div标签放的位置,必须放在末尾,放在中间会把右侧的div挤下去]</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: chartreuse;
        }

        .right {
            float: right;
            width: 100px;
            height: 100px;
            background-color: chocolate;
        }

        .center {
            height: 100px;
            margin-left: 100px;
            margin-right: 100px;
            background-color: cornflowerblue;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用position实现三列布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .main div {
            height: 100px;
        }

        .left {
            position: absolute;
            left: 0;
            width: 100px;
            background-color: cornflowerblue;
        }

        .right {
            position: absolute;
            right: 0;
            width: 100px;
            background-color: crimson;
        }

        .center {
            position: absolute;
            left: 100px;
            right: 100px;
            background-color: darkcyan;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用table布局是现三列布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

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

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

        .left {
            width: 100px;
            height: 100px;
            background-color: darkcyan;
        }

        .right {
            width: 100px;
            height: 100px;
            background-color: darkgoldenrod;
        }

        .center {
            height: 100px;
            background-color: darkmagenta;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性flex实现三列布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .main {
            display: flex;
        }

        .left {
            width: 100px;
            height: 100px;
            background-color: darkcyan;
        }

        .right {
            width: 100px;
            height: 100px;
            background-color: darkgoldenrod;
        }

        .center {
            width: calc(100% - 200px);
            height: 100px;
            background-color: darkmagenta;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用网格(grid)布局实现三列布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .main div {
            width: 100px;
            display: grid;
            grid-template-rows: 100px;
            grid-template-columns: 100px auto 100px;
        }

        .left {
            background-color: darkcyan;
        }

        .right {
            background-color: darkgoldenrod;
        }

        .center {
            background-color: darkmagenta;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>

</html>

总结:
以上提供了5种实现三栏布局的方式那么他们的优缺点呢？
1、float布局是现在用的比较多的布局很多门户网站目前使用这个布局方式,使用的时候只需要注意一定要清除浮动。
2、Position布局只是根据定位属性去直接设置元素位置,个人感觉不太适合用做页面布局
3、table布局使用起来方便,兼容性也不存在问题，不利于搜索引擎抓取信息
4、flex布局比较强大,但是还是存在IE上兼容性问题，只能支持到IE9以上
5、grid布局很强大，但是兼容性很差。
参考链接:https://www.cnblogs.com/webtaotao/p/11031723.html

猜你喜欢