css布局双飞翼布局圣杯布局flex，float_css 飞机布局-优快云博客

本文链接：https://blog.youkuaiyun.com/A_hapiness/article/details/119993694

本文介绍了圣杯布局和双飞翼布局的相同目标，即实现三栏布局，左右两栏宽度固定，中间栏自适应。通过展示使用Flex和Float两种方法的代码实例，详细解析了各自实现原理。Flex布局简洁易懂，而Float布局则利用负margin和相对定位来达到效果。这两种布局方式都是前端开发中常见的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，

圣杯布局flex

   <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .top,.bottom{
            height: 25px;
            background-color: #999;
            line-height: 25px;
            text-align: center;
        }
        .content{
            display: flex;
            line-height: 100px;
            text-align: center;
        }
        .float{
            height: 100px;
        }
        #left{
            width: 100px;
            background-color:red;
        }
        #mid{
            flex: 1;
            background:blue;
        }
        #right{
            width: 150px;
            background: green;
        }
    </style>
</head>
<body>
    <div class="top">头部</div>
    <div class="content">
        <div id="left" class=float>左栏宽度固定</div>
        <div id="mid" class=float>中间内容宽度自适应</div>
        <div id="right" class=float>右栏宽度固定</div>
    </div>
    <div class="bottom">底部</div>
</body>

圣杯布局 float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            text-align: center;
        }
        .top,.bottom{
            height: 20px;
            background: #999;
        }
       .float{
           float: left;
           height: 80px;
       }
       .content::after{
           content:"";
           display: block;
           clear: both;
           overflow: hidden;
           zoom: 1;
       }
       .content{
           line-height: 80px;
           padding-left: 100px;
           padding-right: 150px;
       }
       #mid{
           width: 100%;
           background-color: pink;
       }
       #left{
           width: 100px;
           background-color:tomato;
           position: relative;
           left: -100px;
           margin-left: -100%;
       }
       #right{
           width: 150px;
           background-color: aqua;
           margin-right: -150px;
       }
    </style>
</head>
<body>
    <div class="top">头部</div>
    <div class="content">
        <div id="mid" class=float>中间内容宽度自适应</div>
        <div id="left" class=float>左栏宽度固定</div>
        <div id="right" class=float >右栏宽度固定</div>
    </div>
    <div class="bottom">底部</div>
</body>
</html>