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

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

赵玉玲

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

阅读量380

点赞数

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

本文链接：https://blog.csdn.net/qq_22755565/article/details/84927341

版权

css 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

浮动

左右浮动，主体使用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>

参考：https://www.zhangxinxu.com/wordpress/2009/11/我熟知的三种三栏网页宽度自适应布局方法/

赵玉玲

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
三栏布局：圣杯布局&双飞翼布局

浮动左右浮动，主体使用margin主体结构要在左右的后面&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;style type="text/css"&gt; html,body{ height: 100%; } .left,.right{ width: 200p...
复制链接

扫一扫