前端经典布局（两边固定中间自适应）

时间 2019-12-11

标签前端经典布局两边固定中间自适应栏目 CSS 繁體版

原文原文链接

1、介绍

　　下边将介绍前端很流行的布局方式，要求两边固定，中间自适应。比较流行的布局方式有圣杯布局，双翼布局，flex布局、绝对定位布局。css

2、圣杯布局

　　圣杯布局，顾名思义，他具备如下特色：html

　　1.三列布局，中间自适应，两边定宽；前端

　　2.中间栏要求在浏览器中优先展现；浏览器

　　接下来咱们看实现方式：布局

　　div咱们这样写：flex

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

　　下边直接看代码实现：spa

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>index</title>
        <style type="text/css">
            .container {
                padding: 0 300px 0 200px;
            }
            .left, .main, .right {
                position: relative;
                min-height: 130px;
                float: left;
            }
            .left {
                left: -200px;
                margin-left: -100%;
                background: green;
                width: 200px;
            }
            .right {
                right: -300px;
                margin-left: -300px;
                background-color: red;
                width: 300px;
            }
            .main {
                background-color: blue;
                width: 100%;
            }
           </style>
    </head>
    <body>
        <div class="container"> 
        　　<div class="main">main</div> 
        　　<div class="left">left</div> 
        　　<div class="right">right</div> 
        </div>
    </body>
</html>

出来的样子就是这样：code

　　代码中main的宽度设为100%，left跟right恰好固定到了左右两边。其中使用了一个margin-left为负的值，负的margin-left会让元素沿文档流向左移动，若是负的数值比较大就会一直移动到上一行。设置left部分的margin-left为-100%,就会使left向左移动一整个行的宽度，因为left左边是父元素的边框，因此left继续跳到上一行左移，一直移动到上一行的开头，并覆盖了main部分（仔细观察下图，你会发现main里面的字“main”不见了，由于被left遮住了），left上移事后，right就会处于上一行的开头位置，这时再设置right部分margin-left为负的宽度，right就会左移到上一行的末尾。接下来只要把left和right分别移动到这两个留白就能够了。可使用相对定位移动 left和right部分。htm

3、双翼布局

　　圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏所有float浮动，但左右两栏加上负margin让其跟中间栏div并排，以造成三栏布局。不一样在于解决 “中间栏div内容不被遮挡”问题的思路不同。代码实现：blog

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>index</title>
    <style type="text/css">
    .left, .main, .right {
        float: left;
        min-height: 130px;
        text-align: center;
    }
    .left {
        margin-left: -100%;
        background: green;
        width: 200px;
    }

    .right {
        margin-left: -300px;
        background-color: red;
        width: 300px;
    }
    .main {
        background-color: blue;
        width: 100%;
    }
    .content{
        margin: 0 300px 0 200px;
    }
    </style>
</head>
<body>
<div class="container"> 
　　<div class="main">
    　　<div class="content">main</div> 
    </div>
　　<div class="left">left</div> 
　　<div class="right">right</div> 
</div>
</body>
</html>

　　双飞翼布局比圣杯布局多使用了1个div，少用大体4个css属性（圣杯布局container的 padding-left和padding-right这2个属性，加上左右两个div用相对布局position: relative及对应的right和left共4个属性，；而双飞翼布局子div里用margin-left和margin-right共2个属性，比圣杯布局思路更直接和简洁一点。简单提及来就是：双飞翼布局比圣杯布局多建立了一个div，但不用相对布局了。

4、flex布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>实现三栏水平布局之Flex布局</title>
    <style type="text/css">
    .container{
        display: flex;
        min-height: 130px;
    }
    .main{
        flex-grow: 1;
        background-color: blue;
    }
    .left{
        order: -1;
        flex-basis: 200px;
        background-color: green;
    }
    .right{
        flex-basis: 300px;
        background-color: red;
    }
    </style>
</head>
<body>
<div class="container"> 
　　<div class="main">main</div> 
　　<div class="left">left</div> 
　　<div class="right">right</div> 
</div>
</body>
</html>

5、绝对定位布局

　　绝对定位布局就是至关于把左右两个div绝对定位到左右两边的padding就能够了，这里就不写代码了。

　　本文参考CSDN 做者萌主_iii 。