三栏布局：圣杯布局&双飞翼布局

最新推荐文章于 2022-05-12 14:02:04 发布

赵玉玲

最新推荐文章于 2022-05-12 14:02:04 发布

阅读量443

点赞数

CC 4.0 BY-SA版权

分类专栏： css html 文章标签：双飞翼布局圣杯布局三栏布局

本文链接：https://blog.youkuaiyun.com/qq_22755565/article/details/84927341

css 同时被 2 个专栏收录

9 篇文章

订阅专栏

html

2 篇文章

订阅专栏

本文详细介绍三种三栏网页宽度自适应布局方法：浮动、绝对定位及解决margin负值问题的圣杯布局与双飞翼布局，通过具体代码示例，帮助读者理解和掌握不同场景下的布局策略。

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

浮动

左右浮动，主体使用margin
主体结构要在左右的后面

<!DOCTYPE html>
<html>
    <style type="text/css">
        html,body{
            height: 100%;
        }
        .left,.right{
            width: 200px;
            height: 100%;
            background: #cff;
        }
        .left{
            float:left;

        }
        .right{
            float: right;
        }
        .main{
            margin: 0 200px;
            background: #fcc;
            height: 100%;
        }
    </style>
    <body>
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
    </body>
</html>

绝对定位

左右fixed,主体使用margin

<!DOCTYPE html>
<html>
    <style type="text/css">
        html,body{
            height: 100%;
        }
        .left,.right{
            width: 200px;
            height: 100%;
            background: #cff;
            position: fixed;
            top: 0;
        }
        .left{
            left: 0;

        }
        .right{
            right: 0;
        }
        .main{
            margin: 0 200px;
            background: #fcc;
            height: 100%;
        }
    </style>
    <body>
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
    </body>
</html>

margin负值

按照main、left、right的顺序均左浮动，left的margin-left设置为-100%，right的margin-left为-200px，此时left和right覆盖了main的左右，针对这个问题的两种解决方案为圣杯布局和双飞翼布局

-圣杯布局

为body设置padding，使用position：relative使left和right分别向两边移动

<!DOCTYPE html>
<html>
    <style type="text/css">
        html,body{
            height: 100%;
        }
        .left,.right{
            width: 200px;
            height: 100%;
            background: #cff;
            float:left;
            position: relative;
        }
        .left{
            margin-left: -100%;
            left: -200px;
        }
        .right{
            margin-left: -200px;
            right: -200px;
        }
        
        .main{
            background: #fcc;
            height: 100%;
            width: 100%;
            float: left;
        }
        body{
            padding: 0 200px;
        }
    </style>
    <body>
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </body>
</html>

-双飞翼布局

在main中添加inner-main结构，并为inner-main设置margin-left/right

<!DOCTYPE html>
<html>
    <style type="text/css">
        html,body{
            height: 100%;
        }
        .left,.right{
            width: 200px;
            height: 100%;
            background: #cff;
            float:left;
        }
        .left{
            margin-left: -100%;
        }
        .right{
            margin-left: -200px;
        }
        
        .main{
            background: #fcc;
            float: left;
            width: 100%;
            height: 100%;
        }
        .inner-main{
            margin: 0 200px;
            height: 100%;
        }
    </style>
    <body>
        <div class="main">
            <div class="inner-main"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </body>
</html>