CSS經典3栏合理布局计划方案（6种方式）

日期：2021-01-20 类型：科技新闻我要分享

关键词：网页设计，移动端网页设计，大一网页设计作业成品，网页编辑软件，网页在线编辑

本文详细介绍了CSS經典3栏合理布局计划方案，共享给大伙儿，也给自身做个笔记，实际以下：

3栏合理布局，说白了便是两侧固定不动，正中间自融入。3栏合理布局在开发设计10分普遍

1. float合理布局

最简易的3栏合理布局便是运用float开展合理布局。最先来绘图左、右栏：

    <style>
      .left {
        float: left;
        width: 100px;
        height: 200px;
        background-color: red;
      }
    
      .right {
        float: right;
        width: 100px;
        height: 200px;
        background-color: yellow;
      }
    </style>
      
      <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
      </div>

此时能够获得上下两栏遍布：

接下来再看来正中间栏怎样解决。大家了解针对float元素，其会摆脱文本文档流，别的盒子也会疏忽这个元素。（但别的盒子内的文字仍然会为这个元素让出部位，围绕在周边。）因此此时只需在container器皿内加上1个一切正常的div，其会疏忽left和right，撑满全部container，只需再再加margin为left right流出室内空间便可：

   <style>
      .left {
        float: left;
        width: 100px;
        height: 200px;
        background-color: red;
      }
    
      .right {
        float: right;
        width: 100px;
        height: 200px;
        background-color: yellow;
      }
    
      .main {
        background-color: green;
        height: 200px;
        margin-left: 120px;
        margin-right: 120px;
      }
    
      .container {
        border: 1px solid black;
      }
    
      <div class="container">
      <div class="left"></div>
      <div class="right"></div>
      <div class="main"></div>
      </div>

优点：简易

缺点：正中间一部分最终载入，內容较多时危害体验

2. BFC 标准

BFC(块文件格式化左右文)标准要求：BFC不容易和波动元素重合。因此假如将main元素设置为BFC元素便可：

    <style>
      .left {
        float: left;
        width: 100px;
        height: 200px;
        background-color: red;
      }
    
      .right {
        float: right;
        width: 100px;
        height: 200px;
        background-color: yellow;
      }
    
      .main {
        background-color: green;
        height: 200px;
        overflow: hidden;
      }
    
      <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
      </div>

3. 圣杯合理布局

圣杯合理布局的关键是左、中、右3栏都根据float开展波动，随后根据负值margin开展调剂。

第1步，先看来下基础合理布局

    <style>
        .left {
            float: left;
            width: 100px;
            height: 200px;
            background-color: red;
        }

        .right {
            float: left;
            width: 100px;
            height: 200px;
            background-color: yellow;
        }

        .main {
            float: left;
            width: 100%;
            height: 200px;
            background-color: blue;
        }
    </style>
    <body>
        <div class="container">
            <div class="main"></div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </body>

此时看到的实际效果是：左、右两栏被挤到第2行。这是由于main的宽度为100%。接下来大家根据调剂左、右两栏的margin来将左、中、右放在1行中：

        .left {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: ⑴00%;
            background-color: red;
        }

        .right {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: ⑴00px;
            background-color: yellow;
        }

第2步，将left的margin-left设定为⑴00%，此时左栏会挪动到第1行的首部。随后再将right的margin-left设定为其宽度的负值：⑴00px，则右栏也会挪动到和左、中栏1行中：

但是此时都还没大获全胜，大家试着在main中添加1些文本：

    <body>
        <div class="container">
            <div class="main">fjlskdjflkasjdfljasdljlsjdljsdjflksadj</div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </body>

能够看到文本被压住了，接下来就要处理这个难题。

第3步，给container1个padding，该padding应当恰好等于左、右栏的宽度：

        .container {
            padding-left: 100px;
            padding-right: 100px;
        }

此时看到的結果是左、中、右3栏都总体收拢了，但文本仍然被压住了。

第4步，给左、右两栏再加相对性合理布局，随后再根据设定left和right值向外挪动：

        .left {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: ⑴00%;
            position: relative;
            left: ⑴00px;
            background-color: red;
        }

        .right {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: ⑴00px;
            position: relative;
            right: ⑴00px;
            background-color: yellow;
        }

到此为止，大获全胜：

4. 双飞翼合理布局

双飞翼合理布局的前两步和圣杯合理布局1样，只是解决正中间栏一部分內容被遮挡难题的处理计划方案有一定的不一样：

既然main一部分的內容会被遮挡，那末就在main內部再加1个content，根据设定其margin来绕开遮挡，难题也便可以处理了：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .main {
        float: left;
        width: 100%;
        }
        .content {
        height: 200px;
        margin-left: 110px;
        margin-right: 220px;
        background-color: green;
        }
        
        .main::after {
        display: block;
        content: '';
        font-size: 0;
        height: 0;
        clear: both;
        zoom: 1;
        }
    .left {
        float: left;
        height: 200px;
        width: 100px;
        margin-left: ⑴00%;
        background-color: red;
    }
    .right {
        width: 200px;
        height: 200px;
        float: left;
        margin-left: ⑵00px;
        background-color: blue;
    }   
    </style>
</head>
<body>
    <div class="main">
        <div class="content"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</body>
</html>

唯1必须留意的是，必须在main后边加1个元向来消除波动。

5. flex合理布局

flex合理布局是发展趋势，运用flex完成3栏合理布局也很简易，但是必须留意访问器适配性：

        <style type="text/css">
            .container {
                display: flex;
                flex-direction: row;
            }
            .middle {
                height: 200px;
                background-color: red;
                flex-grow: 1;
            }

            .left {
                height: 200px;
                order: ⑴;
                margin-right: 20px;
                background-color: yellow;
                flex: 0 1 200px;
            }

            .right {
                height: 200px;
                margin-left: 20px;
                background-color: green;
                flex: 0 1 200px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="middle">fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj</div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </body>

有几点必须留意1下：

main要最先载入就务必写在第1位，但由于left必须显示信息在最左边，因此必须设定left的order为⑴
flex特性的详细写法是：flex: flex-grow flex-shrink flex-basis 。这也是flex完成3栏合理布局的关键，main设定flex-grow为1，表明过剩室内空间所有给main，而室内空间不足时，仅变小left right一部分，另外由于特定了left right一部分的flex-basis，因此特定了二者的宽度，确保其显示信息实际效果

6. 肯定精准定位

肯定精准定位的方法也较为简易，并且能够优先选择载入行为主体：

        <style type="text/css">
            .container {
            }
            .middle {
                position: absolute;
                left: 200px;
                right: 200px;
                height: 300px;
                background-color: yellow;
            }

            .left {
                position: absolute;
                left: 0px;
                width: 200px;
                height: 300px;
                background-color: red;
            }

            .right {
                position: absolute;
                right: 0px;
                width: 200px;
                background-color: green;
                height: 300px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="middle">fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj</div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </body>

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

上一篇：CSS制做提醒框 ‘正在载入请。。。。。’ 返回下一篇：没有了