美文网首页
实现双飞翼布局

实现双飞翼布局

作者: 温梦丽 | 来源:发表于2018-05-24 11:41 被阅读0次

也叫圣杯布局,圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局(想象一下圣杯是主体是加上两个耳朵;鸟儿是身体加上一对翅膀),圣杯布局是Kevin Cornell在2006年提出的一个布局模型概念,在国内最早是由淘宝UED的工程师(传说是玉伯)改进并传播开来,在中国也有叫法是双飞翼布局,它的布局要求有几点: 三列布局,中间宽度自适应,两边定宽; 中间栏要在浏览器中优先展示渲染; 允许任意列的高度最高;

实现方法一:flex

使用flex布局实现双飞翼效果的重点有下面几个:
因为元素在DOM中的顺序是middle -> left -> right,所以

需要在渲染的时候对排列的顺序进行修改。
左右侧固定宽度。
中间的元素需要自适应。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #container{
            display: flex;//设置flex布局
            height:200px;
               justify-content: space-between;//两端对齐
        }
        #middle{
            
            height:200px;
            background: red;
            order: 2;
        }
        #left,#right{
            width: 200px;
            height: 200px;
            background: yellow;
            flex-shrink: 0;
                       text-align:center;
        }
        #left{
            order: 1;
        }
        #right{
            order: 3;
        }
        
    </style>
    <body>
        <div id="container">
            <div id="middle">圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局(想象一下圣杯是主体是加上两个耳朵;鸟儿是身体加上一对翅膀),圣杯布局是Kevin Cornell在2006年提出的一个布局模型概念,在国内最早是由淘宝UED的工程师(传说是玉伯)改进并传播开来,在中国也有叫法是双飞翼布局,它的布局要求有几点:三列布局,中间宽度自适应,两边定宽;中间栏要在浏览器中优先展示渲染;允许任意列的高度最高;</div>
            <div id="left">左边栏</div>
            <div id="right">右边栏</div>
        </div>
    </body>
</html>

页面效果

image.png image.png

相关文章

  • CSS Flex实现各种布局

    实现两栏布局 实现栅格布局 实现三栏布局 附录 双飞翼布局 圣杯布局

  • 特殊布局方法

    关于圣杯布局和双飞翼布局:CSS布局之--淘宝双飞翼布局双飞翼布局介绍CSS控制自适应宽度两三栏布局圣杯布局的实现...

  • 三列布局之圣杯布局、双飞翼布局

    圣杯布局 双飞翼布局 使用flex弹性布局实现

  • CSS简单布局任务

    实现一个单栏布局 实现一个三栏布局 实现圣杯布局 实现双飞翼布局 实现效果

  • css入门11

    单栏布局三栏布局圣杯布局双飞翼布局实现如下页面

  • 前端知识收集-css常用布局及练习部分

    说明 前半部分为常用布局实现,包括双飞翼,圣杯,flex后半部分为布局练习 常用布局实现 双飞翼布局 常用的三列布...

  • CSS布局知识点

    双飞翼布局 (淘宝UED对圣杯布局的升级优化) 圣杯布局和双飞翼布局的实现(三栏布局),都是左右两栏固定宽度,中间...

  • CSS高级技巧

    双飞翼布局 什么是双飞翼布局呢? 事实上,圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局,两边的盒子宽度...

  • 圣杯布局和双飞翼布局

    1、双飞翼 2、flex实现圣杯 3、圣杯布局

  • 圣杯布局和双飞翼布局

    实现圣杯布局和双飞翼布局,“负边距”是必不可少的。 了解圣杯布局和双飞翼布局之前,我们先来了解下负边距。一、定义:...

网友评论

      本文标题:实现双飞翼布局

      本文链接:https://www.haomeiwen.com/subject/xlojjftx.html