[css]布局三栏式布局，左右定宽，中间内容区域自适应

最新推荐文章于 2022-08-06 12:13:59 发布

GXing007

最新推荐文章于 2022-08-06 12:13:59 发布

阅读量1k

点赞数

分类专栏： html/css

本文链接：https://blog.csdn.net/GXing007/article/details/79484013

版权

html/css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

实现三栏布局的经典方式有：圣杯布局，双飞翼布局，两者都是利用父元素的margin/padding来达到想要的效果，同时也是遵循重要内容优先加载的规则(先加载中间部分)。只是在实现上有些不同，同时利用css3的flex布局也可以实现以上效果。

圣杯布局：用一个父元素，包裹三个子元素，同时将中间部分写在前边

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏布局(圣杯布局)</title>
    <style>
        body{ margin: 0; padding: 0; border: 0;}
        .main{ padding: 0 150px 0 100px;}
        .left{ width: 100px; background:green; height: 100px; position: relative; float: left; margin-left: -100%; left:-100px;}
        .middle{ width: 100%; background: red; height: 100px; float: left;}
        .right{ float: left; height: 100px;  background: #5900ce; width: 150px; position: relative; margin-left: -150px; right: -150px;}
    </style>
</head>
<body>
    <div class="main">
        <div class="middle">111111111111111</div>
        <div class="left">222222222</div>
        <div class="right">333333333333</div>
    </div>
</body>
</html>

双飞翼布局：双飞翼布局不用一个div包裹所有子元素，只需要包裹中间自定义区域，还是要将元素进行float的定位，然后利用center元素的margin+Left等的负margin实现效果，因为没有使用padding使得Left、right元素不需要进行定位，双飞翼布局实现上比圣杯布局简单。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <style>
        body{ margin: 0; padding: 0;}
        .main,.left,.right{ float: left; height: 100px;}
        .main_a{ margin: 0 120px 0 100px; height: 100px; background: #5900ce;}
        .main{ width: 100%;}
        .left{ width: 100px; background: #0406e6; margin-left: -100%;}
        .right{ width: 120px; height: 100px; background: #fff473; margin-left: -120px;}
    </style>
</head>
<body>
    <div class="main">
        <div class="main_a"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</body>
</html>

flex布局：flex弹性布局中要是利用了其自身的一些属性，相比其他的方式而言，flex的方式会更加简洁，利用order调整元素的放置位置，Left、right的宽度固定，不用设置flex的值，只有center的值是随机变化的所以需要设置flex：1 1 width，其相当于三个属性的组合属性：flex-grow、、flex-basis。

flex-grow：

number

一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。

flex-shrink：flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

flex-basis：

number

一个长度单位或者一个百分比，规定灵活项目的初始长度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex三栏式布局</title>
    <style type="text/css">
        .container{
            display:flex;
        }
        .center{
            flex: 1 1 300px;
            order:2;
            background:blue;
        }
        .left{
            width:220px;
            background:green;
            order:1;
        }
        .right{
            width:220px;
            background: #f00;
            order:3;
        }
    </style>
</head>
<body>
 <div class="container">
     <div class="center">
         <h4>middle</h4>
         <p>HHHHHHHHHHHHHHHHHHHHHH
             hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
             HHHHHHHHHHHHHHHHHHHHHH
             hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
         </p>
     </div>
     <div class="left">
         <h4>left</h4>
         <p>oooooooooooooo
             0000000000000000
             00000000000000000
             ooooooooooooooo
             ooooooooooooooo
             000000000000000</p>
     </div>
     <div class="right">
         <h4>right</h4>
         <p>BBBBBBBBBBBBBB
             888888888888888888
             BBBBBBBBBBBBBBBBBB
             88888888888888888888</p>
     </div>
 </div>
</body>
</html>