两/三栏布局(圣杯双飞翼)

最新推荐文章于 2025-05-14 08:15:37 发布

xingyunwei1

最新推荐文章于 2025-05-14 08:15:37 发布

阅读量114

点赞数

文章标签： html5 html css

本文链接：https://blog.youkuaiyun.com/xingyunwei1/article/details/120188330

版权

本文详细介绍了前端布局中常见的两栏布局和三栏布局的实现方式，包括左边定宽、右边自适应的两栏布局，以及圣杯布局和双飞翼布局这两种经典的三栏布局解决方案。通过具体的HTML和CSS代码示例，阐述了如何创建两侧固定宽度、中间自适应的页面结构，对于前端开发者来说是重要的基础知识。

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

常用的页面布局（两栏布局、三栏（圣杯、双飞翼）布局）

1. 两栏布局,左边定宽，右边自适应

//html
<div id="left">左边定宽</div>
<div id="right">右边自适应,前端前端前端前端前端前端前端前端前端前端</div>

左边左浮动，右边加oveflow:hidden;变成BFC清除左侧浮动元素的影响

 #left{
    float: left;
    width: 200px;
    background: green;
}
#right{
    overflow: hidden;
    background: red;
}

2. 三栏布局,圣杯布局、双飞翼布局

圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局

圣杯布局

<html>
<head>
    <title>圣杯布局</title>
    <meta charset="utf-8">
    <style>
        header{
            width: 100%;
            height: 40px;
            background-color: darkseagreen;
        }
        #container{
            height:200px;
            padding: 0px 120px 0 140px;/*腾出宽度,即让main中的内容不会被左右的部分覆盖*/
            background:green;
        }
 
        #main{
            height:200px;
            width: 100%;
            position: relative;
            background:orange;
            float:left;
        }
        #left{
            height:200px;
            width: 140px;
            margin-left: -100%;/*将left层拉回main层所在高度区域*/
            left: -140px;/*调整位置*/
            position: relative;
            background:blue;
            float:left;
        }
        #right{
            height:200px;
            width: 120px;
            margin-left: -120px;/*将right层拉回main层所在高度区域*/
            right: -120px;/*调整位置*/
            position: relative;
            background:yellow;
            float:left;
        }
        footer{
            width: 100%;
            height: 30px;
            background-color: darkslategray;
        }
    </style>
</head>
<body>
<header>header</header>
<div id="container">
    <div id="main">main</div>
    <div id="left">left</div>
    <div id="right">right</div>
</div>
<footer>footer</footer>
</body>
</html>

双飞翼布局

<html>
<head>
    <title>三栏布局</title>
    <meta charset="utf-8">
    <style>
        header{
            width: 100%;
            height: 40px;
            background-color: darkseagreen;
        }
        #main{
            width: 100%;
            height:200px;
            position: relative;
            float:left;
        }
        #main-inner{
            margin:0 120px 0 140px;/*让main的内容不被左右的内容覆盖*/
            background:red;
            height:100%;
        }
        #left{
            width: 140px;
            height:200px;
            margin-left: -100%;/*将left层拉回main层所在高度区域*/
            background:blue;
            float:left;
        }
        #right{
            width: 120px;
            height:200px;
            margin-left: -120px;/*将right层拉回main层所在高度区域*/
            background:yellow;
            float:left;
        }
        footer{
            width: 100%;
            height: 30px;
            background-color: darkslategray;
            clear:both;/*避免因前面的元素浮动而上浮*/
        }
    </style>
</head>
<body>
<header>header</header>
 
<div id="main">
    <div id="main-inner">min-inner</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
 
<footer>footer</footer>
</body>
</html>