圣杯+双飞翼自适应布局

最新推荐文章于 2025-03-24 10:35:25 发布

weixin_33753003

最新推荐文章于 2025-03-24 10:35:25 发布

阅读量91

点赞数

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000015634014

本文介绍网页布局中的两种经典方法：圣杯布局与双飞翼布局。这两种方法均可实现左右固定宽度、中间自适应宽度的效果。圣杯布局通过特殊CSS属性实现三栏布局，而双飞翼布局则在此基础上添加了额外的内层div来进一步调整内容位置。

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

一、圣杯布局

左右固定200px，中间自适应

左右两个div左右浮动，中间div写到前面
通过margin-left：-100%；来调整到同一行
父容器添加左右padding，左右div相对定位

详细代码如下：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>圣杯布局</title>
        <style>        
*{
    margin:0;
}
html{
    height:100%;
}
.box{
    width:800px;
    height:300px;
    border:1px solid black;
    margin:0 auto;
    background:#0ff;
    padding:0px 200px;
}
.left{
    width:200px;
    height:300px;
    background:#f00;
    float:left;
    margin-left:-100%;
    position:relative;
    left:-200px;
}
.center{
    width:100%;
    height:300px;
    background:#0f0;
    float:left;    
}
.right{
    width:200px;
    height:300px;
    background:blue;
    float:right;    
    margin-left:-100%;
    position:relative;
    right:-200px;    
}
        </style>
    </head>
    <body>
        <div class="box">
            <div class="center"></div>
            <div class="left"></div>            
            <div class="right"></div>
        </div>
    </body>
</html>

运行结果如下图：

图片描述

二、双飞翼布局

左右固定200px，中间自适应

左右两个div左右浮动，中间div写到前面
通过margin-left：-100%；来调整到同一行
中间div添加一个子节点div，设置margin调整位置

具体代码如下：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>双飞翼布局</title>
        <style>
        *{
    margin:0;
}
html{
    height:100%;
}
.box{
    width:1000px;
    height:300px;
    border:1px solid black;
    margin:0 auto;
    background:#0ff;    
}
.left{
    width:200px;
    height:300px;
    background:#f00;
    float:left;
    margin-left:-100%;    
}
.center{
    width:100%;
    height:300px;
    background:#0f0;
    float:left;    
}
.right{
    width:200px;
    height:300px;
    background:blue;
    float:right;    
    margin-left:-100%;    
}
.conter{
    margin:0 200px;
}
        </style>
    </head>
    <body>
        <div class="box">
            <div class="center">
                <div class="conter">
                    双飞翼布局
                </div>
            </div>
            <div class="left"></div>            
            <div class="right"></div>
        </div>    
    </body>
</html>

运行结果如下图：

图片描述

圣杯+双飞翼 自适应布局

一、圣杯布局

左右固定200px，中间自适应

详细代码如下：

运行结果如下图：

二、双飞翼布局

左右固定200px，中间自适应

具体代码如下：

运行结果如下图：

加关注 持续更新

圣杯+双飞翼自适应布局

加关注持续更新