DIV+CSS实现三列布局

实现三列布局最基本的要求:

两边列宽度固定,中间列自适应
中间列内容完整显示
中间列优先加载

实现三列布局方案:

定位方式:

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位方式实现三列布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            position: relative;
            /*2*left+right & 2*right+left*/
            min-width: 600px;
        }

        body > div {
            height: 300px;
        }

        .left, .right {
            width: 200px;
            background: #98FF1A;
        }

        .left {
            position: absolute;
            left: 0;
            top: 0;
        }

        .right {
            position: absolute;
            right: 0;
            top: 0;
        }

        .middle {
            padding: 0 200px;
            background: #8E8DCC;
        }
    </style>
</head>
<body>
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</body>
</html>

效果:

弊端:定位方式导致脱离文档流,影响文档其他标签的正常布局(不建议使用).

浮动方式:

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动方式实现三列布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            /*2*left+right & 2*right+left*/
            min-width: 600px;
        }

        body > div {
            height: 300px;
        }

        .left, .right {
            width: 200px;
            background: #98FF1A;
        }

        .left {
            float: left;
        }

        .right {
            float: right;
        }

        .middle {
            background: #8E8DCC;
        }
    </style>
</head>
<body>
<div class="left">left</div>
<div class="right">right</div>
<div class="middle">middle</div>
</body>
</html>

效果:

弊端:在网络不好的情况下,导致页面主要内容(中间列)未能优先加载(优先加载页面边列内容:页面加载按自上而下,自左而右的顺序加载).

圣杯方式:

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯方式实现三列布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            /*2*left+right & 2*right+left*/
            min-width: 600px;
        }

        header, footer {
            height: 50px;
            line-height: 50px;
            text-align: center;
            background: green;
        }

        .container {
            padding: 0 200px;
        }

        .clearfix {
            zoom: 1;
        }

        .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }

        .left, .middle, .right {
            float: left;
        }

        .left, .right {
            position: relative;
            width: 200px;
            background: #98FF1A;
        }

        .left {
            left: -200px;
            top: 0;
            margin-left: -100%;
        }

        .right {
            right: -200px;
            top: 0;
            margin-left: -200px;
        }

        .middle {
            width: 100%;
            word-break: break-all;
            background: #8E8DCC;
        }
    </style>
</head>
<body>
<header>Header</header>
<div class="container clearfix">
    <div class="middle">middle</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<footer>Footer</footer>
</body>
</html>

效果:

双飞翼布局:

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            min-width: 600px;
        }

        header, footer {
            width: 100%;
            text-align: center;
            height: 45px;
            line-height: 45px;
            background: gray;
        }

        #container {
            overflow: hidden;
        }

        .clearfix {
            *zoom: 1;
        }

        .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }

        .fl {
            float: left;
            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }

        .middle {
            width: 100%;
        }

        .middle > .main {
            padding: 0 200px;
        }

        .left, .right {
            width: 200px;
            background: greenyellow;
        }

        .left {
            margin-left: -100%;
        }

        .right {
            margin-left: -200px;
        }
    </style>
</head>
<body>
<header>header</header>
<div id="container" class="clearfix">
    <div class="middle fl">
        <div class="main">
            main
        </div>
    </div>
    <div class="left fl">left</div>
    <div class="right fl">right</div>
</div>
<footer>footer</footer>
</body>
</html>

效果:

原文链接：https://blog.csdn.net/qq_2575896094/article/details/80234558