CSS之三栏布局

一、绝对定位

最直观，最容易理解的：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            min-width: 700px;
        }

        .header,
        .footer {
            background: #aaa;
            height: 20px;
        }

        .left,
        .right {
            position: absolute;
            top: 20px;
            min-height: 200px;
        }

        .left {
            background: red;
            left: 0;
            width: 200px;
        }

        .right {
            background: red;
            right: 0;
            width: 220px;
        }

        .middle {
            background: lightblue;
            margin: 0 220px 0 200px;
            min-height: 200px;
        }

        .footer {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="header">
        <h4>header</h4>
    </div>

    <div class="left">
        <h4>left</h4>
        <p>我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端
        </p>
    </div>
    <div class="middle">
        <h4>middle</h4>
        <p>我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端
        </p>
    </div>
    <div class="right">
        <h4>right</h4>
        <p>我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端
        </p>
    </div>
    <div class="footer">
        <h4>footer</h4>
    </div>
</body>

</html>

二、圣杯与双飞翼（margin负值）

1、圣杯与双飞翼布局的作用与区别

作用：

圣杯布局和双飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。

区别：

圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。

不同在于解决”中间栏div内容不被遮挡“问题的思路不一样：

圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动到padding区域，达到不遮挡中间div的目的。
双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。

圣杯布局：使用了一个container包裹左中右，然后用padding制造左右的位置避免遮挡中间

双飞翼布局：中间使用一个内置div，然后用margin制造左右的位置避免遮挡中间

2、圣杯布局

1、为达到不遮挡中间，给container设置padding:0 220px 0 200px，，留出两侧位置给left和right

2、将三个div设置float:left , 再加上一个position:relative (因为会用到相对定位）

3、设置三个div 的宽度，middle设置100%，left设置200px，right设置220px（left和right保持和padding宽度一致）

4、设置left 的位置，首先margin-left：-100%（此时，left位于middle上面且在container的最左侧，100%相对于container的宽度），然后设置left：-200px，将left移动到container的左padding区域

5、设置right的位置，首先margin-right：-220px（此时，left位于middle上面且在container的最右侧，-220px正好为right宽），然后设置right：-220px，将right移动到container的右padding区域

6、如果container高度要保持一致，可以给left middle right都加上min-height:200px

注意：

1、middle部分要放在container的最前部分，然后是left,right

2、container、footer需要清除浮动影响

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            min-width: 700px;
        }

        .header,
        .footer {
            background: #aaa;
        }

        .container {
            padding: 0 220px 0 200px;
        }

        .container::after {
            clear: both;
            content: "";
            /*content属性是必须的，其值可以为空*/
            display: table;
            /*采用此方法可以有效避免浏览器兼容问题*/
        }

        .left,
        .middle,
        .right {
            position: relative;
            float: left;
            min-height: 200px;
        }

        .left {
            background: red;
            margin-left: -100%;
            left: -200px;
            width: 200px;
        }

        .right {
            background: red;
            margin-left: -220px;
            right: -220px;
            width: 220px;
        }

        .middle {
            background: lightblue;
            width: 100%;
        }

        .footer {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="header">
        <h4>header</h4>
    </div>
    <div class="container">
        <div class="middle">
            <h4>middle</h4>
            <p>我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端
            </p>
        </div>
        <div class="left">
            <h4>left</h4>
            <p>我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端
            </p>
        </div>
        <div class="right">
            <h4>right</h4>
            <p>我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端
            </p>
        </div>
    </div>
    <div class="footer">
        <h4>footer</h4>
    </div>
</body>

</html>

效果：

0 220px 0 200px

3、双飞翼布局

1、为达到不遮挡中间，给middle里的middle-inner设置margin:0 220px 0 200px，留出两侧位置给left和right

2、将三个div设置float:left

3、设置三个div 的宽度，middle设置100%，left设置200px，right设置220px（left和right保持和margin宽度一致）

4、设置left 的位置，首先margin-left：-100%（此时，left位于middle上面且在最左侧），占用middle-inner的左边位置

5、设置right的位置，首先margin-right：-220px（此时，left位于middle上面且在最右侧），占用middle-inner的右边位置

6、如果高度要保持一致，可以给left middle right都加上min-height:200px

注意：

1、middle部分要放在container的最前部分，然后是left,right

2、container、footer需要清除浮动影响

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            min-width: 700px;
        }

        .header,
        .footer {
            background: #aaa;
        }

        .left,
        .middle,
        .right {
            float: left;
            min-height: 200px;
        }

        .left {
            background: red;
            margin-left: -100%;
            width: 200px;
        }

        .right {
            background: red;
            margin-left: -220px;
            width: 220px;
        }

        .middle {
            background: lightblue;
            width: 100%;
        }

        .middle-inner {
            margin: 0 220px 0 200px;
        }

        .footer {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="header">
        <h4>header</h4>
    </div>
    <div class="middle">
        <div class="middle-inner">
            <h4>middle</h4>
            <p>我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端
            </p>
        </div>
    </div>
    <div class="left">
        <h4>left</h4>
        <p>我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端
        </p>
    </div>
    <div class="right">
        <h4>right</h4>
        <p>我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端
        </p>
    </div>
    <div class="footer">
        <h4>footer</h4>
    </div>
</body>

</html>

效果：

三、自身浮动

左栏左浮动，右栏右浮动，主体直接放后面实现自适应。三个div标签的顺序的关键是要把主体div放在最后，左右两栏div顺序任意。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            min-width: 700px;
        }

        .header,
        .footer {
            background: #aaa;
            height: 20px;
        }

        .left {
            background: red;
            width: 200px;
            min-height: 200px;
            float: left;
        }

        .right {
            background: red;
            width: 220px;
            min-height: 200px;
            float: right;
        }

        .middle {
            background: lightblue;
            margin: 0 220px 0 200px;
            min-height: 200px;
        }

        .footer {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="header">
        <h4>header</h4>
    </div>

    <div class="left">
        <h4>left</h4>
        <p>我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端
        </p>
    </div>
    <div class="right">
        <h4>right</h4>
        <p>我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端
        </p>
    </div>
    <div class="middle">
        <h4>middle</h4>
        <p>我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端我爱前端
        </p>
    </div>
    <div class="footer">
        <h4>footer</h4>
    </div>
</body>

</html>

效果：

三种方法里最直观，最容易理解的：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。

posted @ 2020-06-15 14:08 才华充电中阅读(182) 评论(0) 收藏举报

刷新页面返回顶部

才华充电中

君子藏器于身，待时而动