圣杯布局和双飞翼布局

最新推荐文章于 2022-11-28 10:28:14 发布

liuliuliu_666

最新推荐文章于 2022-11-28 10:28:14 发布

阅读量326

点赞数

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

前端同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

圣杯布局

1 篇文章 0 订阅

订阅专栏

介绍：

两者都属于三列布局，是一种很常见的页面布局方法，三列一般分别是子列sub、主列main和附加列extra，其中子列一般是居左的导航，且宽度固定；主列是居中的主要内容，宽度自适应；附加列一般是广告等额外信息，局右且宽度固定。

1.圣杯布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * {
        margin: 0;padding: 0;
    }
        body{
            min-width: 600px;
        }
        .container {
            min-width: 600px;
            padding-left: 210px;padding-right: 190px;
            overflow: hidden;
        }
        .main {
            float: left;width: 100%;height: 300px;background: rgba(255,0,0,.5);

        }
        .sub {
            width: 200px;height: 300px;float: left;margin-left: -100%;background-color: rgba(0,255,0,.5);
            position: relative;left: -210px;
        }
        .extra {
            width: 180px;height: 300px;float: left;margin-left: -180px;background-color: rgba(0,0,255,.5);
            position: relative;right: -190px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="main"></div>
        <div class="sub"></div>
        <div class="extra"></div>
    </div>
</body>
</html>

2.双飞翼布局（淘宝使用的布局方式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .main-wrapper {
            float: left;
            width: 100%;
        }
        .main {
            height: 300px;margin-left: 210px;margin-right: 190px;background-color: rgba(255,0,0,.5);
        }
        .sub {
            height: 300px;width: 200px;float: left;margin-left: -100%;background-color: rgba(0,255,0,.5);
        }
        .extra {
            height: 300px;width: 180px;float: left;margin-left: -180px;background-color: rgba(0,0,255,.5);
        }
    </style>
</head>
<body>
    <div class="main-wrapper">
        <div class="main"></div>
    </div>
    <div class="sub"></div>
    <div class="extra"></div>
</body>
</html>

总结：

两种布局方式都是把主列放在文档流的最前面，使主列优先加载。
两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。
两种布局的不同之处在于如何处理中间主列的位置：圣杯布局是利用父容器的左右内边距定位‘双飞翼布局是把主列嵌套在div后利用主列的左、右外边距定位

liuliuliu_666

关注

0
点赞
踩
0

收藏

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

介绍：两者都属于三列布局，是一种很常见的页面布局方法，三列一般分别是子列sub、主列main和附加列extra，其中子列一般是居左的导航，且宽度固定；主列是居中的主要内容，宽度自适应；附加列一般是广告等额外信息，局右且宽度固定。1.圣杯布局：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Do
复制链接

扫一扫