经典布局之圣杯布局&双飞翼布局

前言

所谓经典,说白了就是古老的东西,但是又是很有用的东西。大多数前端,还有本菜,都或多或少了解的圣杯布局和双飞翼布局。

本文只对这两种布局进行简单的探讨(毕竟本菜真的好菜啊)

不管怎样,写作的好处自然很多,可以巩固自己的知识,弘扬程序猿一贯的乐于分享的精神,也望日后能有温故而知新的效果。

概述

虽然两种布局名称不一样,但圣杯布局和双飞翼布局效果是一致的,都是三列布局,都是中间宽度自适应,左右宽度为定值的布局,且都是让浏览器将中间区块优先渲染。

效果图如下:


图1

两种布局采用的策略

1. 圣杯布局:

html结构

<div id="container">
    <div class="center">center</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

1.1 父容器container设置左右margin 以容纳左右两列,container的width不设置,自适应
1.2 三列都设置左浮动,center块设置width为100%,占满父容器宽度;
1.3 然后利用浮动元素设置margin为一定负值时会跳到上一行的特性(注意:如果前面的元素不是浮动元素,负margin是不会起到跳到上一行的效果的),将左边列的margin-left设置为-100%,也就是父容器的宽度,即center那列的宽度,将right块的margin-left设置为负的right块的宽度,比如right块的宽度为100px,则设置margin-left为-100px;
1.4 设置左边列和右边列position为relative,并设置左边列的left为负的左边容器留白的宽度,设置右边列的right为容器右边留白的宽度

2. 双飞翼布局

html结构

<div id="container2">
    <div class="center2">
        <div class="wrap">center2</div>
    </div>
    <div class="left2">left2</div>
    <div class="right2">right2</div>
</div>

2.1 设置container2的width为100%
2.2 设置center2、left2和right2左浮动,center的width为100%;
2.3 设置left2 的margin-left为-100%,right2的margin-left为right2的宽度的负数
2.4 设置wrap 的左右margin分别为left2和right2的宽度,适当留出一点间隙,width不设置为自适应

完整实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局双飞翼布局</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        body{
            text-align: center;
        }

        /*圣杯布局*/
        #container{
            padding:0 210px;
            overflow: hidden;
            font-size: 30px;
        }
        .left,
        .center,
        .right{
            float: left;
        }
        .center{
            width:100%;
            height: 50px;
            background: blue;
        }
        .left{
            position:relative;
            left: -210px;
            width:200px;
            height: 100px;
            margin-left: -100%;
            background: red;
        }
        .right{
            position: relative;
            right: -210px;
            width: 200px;
            height: 100px;
            margin-left: -200px;
            background: green;
        }
        
        /*双飞翼布局*/
        #container2{
            width:100%;

        }
        .left2,
        .right2,
        .center2{
            float: left;
        }
        .center2{
            width:100%;
            /*height: 200px;*/
            
        }
        .center2 .wrap{
            height: 200px;
            margin-left: 210px;
            margin-right: 210px;
            background: #392;
        }
        .left2{
            width:200px;
            height: 100px;
            background: red;
            margin-left: -100%;
        }
        .right2{
            width:200px;
            height: 100px;
            background: blue;
            margin-left: -200px;
        }
    </style>
</head>
<body>
    <h2>圣杯布局</h2>
    <div id="container">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

    <br><br>
    <h2>双飞翼布局</h2>
    <div id="container2">
        <div class="center2">
            <div class="wrap">center2</div>
        </div>
        <div class="left2">left2</div>
        <div class="right2">right2</div>
    </div>
</body>
</html>

效果:


图2

讨论两种布局的区别

从html上看,双飞翼布局多了一个标签
从css上看,明显地双飞翼布局的css代码更少

而且,圣杯布局暴露出一个问题:


图3

这个图为浏览器窗口缩小到一定大小的时候,圣杯布局出现排版错乱的现象,原因是圣杯布局的中间那块宽度是自适应的,浏览器缩小到中间的那块宽度小于左右两块时,左边的那块margin-left不足以跑到上一行,因此出现了排版错乱的现象。解决的办法为container 设置min-width为左右两块的宽度较大者。但是,这样看来,明显是使用双飞翼布局更优。本人推荐用双飞翼布局的方式。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,787评论 1 92
  • 在百度前端技术学院2016的春季任务中,第一阶段系列任务作为基础练习,主要是让学员熟练html及css。其中,ta...
    夜来小星阅读 552评论 0 7
  • 1.瀑布流布局 思路:要求:当图片宽度相同,高度不同时;如何做一面图片墙;每次图片加载到每列最低的位置;1.图片的...
    饥人谷_楠柒阅读 2,504评论 2 54
  • 在前端布局中,事实上,圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应...
    风铭阅读 1,481评论 1 6
  • 三栏式布局 涉及浮动和清除浮动,主要讲解“圣杯”和“双飞翼”两种解决方法。这两种方法实现的都是三栏布局,两边的盒子...
    紫电倚青霜阅读 2,377评论 0 6