CSS常用布局实现05-圣杯布局和双飞翼布局

1. 简介

其实对于三列布局的实现,之前网上使用最多的还是这两种。它们有一个共同的优点,就是可以使主内容优先加载。当然,如果不考虑兼容,flex和grid还是优先推荐的。

2.实现

我们直接上代码,代码中有详细注释:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局vs双飞翼布局</title>
    <style>
        * {
            margin:0;
            padding: 0;
        }
        section {
            margin-bottom: 10px;
        }
        /*虽然清除了浮动,但需要注意的是负margin引发的副作用,section其实包含了left和right负margin前的内容高度*/
        .clearfix:after {
            display: table;
            content: '.';
            visibility: hidden;
            clear: both;
        }
    </style>
</head>
<body>
<!--圣杯布局-->
<!--优点:主内容优先展示-->
<!--缺点:屏幕宽度缩太小时,样式会乱-->
<section class="holy-grail clearfix">
    <style>
        .holy-grail .wrap {
            padding: 0 200px;
        }
        .holy-grail .main {
            width: 100%;
            float: left;
            background: red;
        }
        .holy-grail .left {
            width: 200px;
            float: left;
            background: green;
            margin-left: -100%;
            position: relative;
            left: -200px;
        }
        /*这里设置margin-right可以代替注释的三行代码的效果*/
        .holy-grail .right {
            width: 200px;
            float: left;
            background: blue;
            /*margin-left: -200px;*/
            /*position: relative;*/
            /*left: 200px;*/
            margin-right: -200px;
        }
    </style>
    <article class="wrap">
        <div class="main">
            <p>main content</p>
            <p>main content</p>
            <p>main content</p>
        </div>
        <div class="left">left content</div>
        <div class="right">right content</div>
    </article>
</section>
<!--双飞翼布局-->
<!--优点:主内容优先显示,兼容性好-->
<!--缺点:需要增加一层html结构-->
<section class="double-wings clearfix">
    <style>
        .double-wings .main {
            width: 100%;
            float: left;
        }
        .double-wings .left {
            width: 200px;
            float: left;
            background: green;
            margin-left: -100%;
        }
        .double-wings .right {
            width: 200px;
            float: left;
            background: blue;
            margin-left: -200px;
        }
        .double-wings .inner {
            background: red;
            margin: 0 200px;
        }
    </style>
    <article class="wrap">
        <div class="main">
            <div class="inner">
                <p>main content</p>
                <p>main content</p>
                <p>main content</p>
            </div>
        </div>
        <div class="left">left content</div>
        <div class="right">right content</div>
    </article>
</section>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏技术墨客

React中的模式对话框 转

在16.x版本之后React提供了Protals功能来解决模式对话框不在Dom根节点导致的一些BUG。除了Protal还有更多的方法去解决这些问题,本文来自Da...

9730
来自专栏DeveWork

替换WordPress 自带默认的 jQuery库, jQuery库页脚加载

在开发WordPress 主题或者WordPress 插件时候,常常要通过wp_enqueue_script这个钩子挂载WordPress 自带的 jQuery...

258100
来自专栏React Native开发圈

React Native 图片查看组件

npm i react-native-image-zoom-viewer--save

14320
来自专栏web开发

VUE路由去除#问题

最近自己在写一个vue的小型管理系统,在浏览器中看到的路由都是带有#的,很是不好看。为了解决此问题,大家一般都会想到:mode: 'history'。可是在开发...

36740
来自专栏游戏杂谈

Bootstrap的表单设计器

如果是内部系统或是自己需要写个简单点的页面,可以直接使用Twitter的Bootstrap,而这个表单器也是非常好用,直接拖拽,设置属性,得到一个很漂亮的表单...

37220
来自专栏乐沙弥的世界

MongoDB 复制集(Replica Set)

30000
来自专栏钱塘大数据

【干货】50个Excel常用功能,一秒变数据处理专家

今天小编给大家分享工作中经常使用到的EXCEL表格实用技巧,整整50个,学会一半,都会让你比别人牛N倍!EXCEL表格制作。 50个实用技巧 ▽附动态说明图▽ ...

7.9K70
来自专栏编程微刊

微信小程序从零开始开发步骤(五)轮播图

40830
来自专栏Theo Tsao

Angular学习笔记(一)

Angular 应用是模块化的,并且 Angular 有自己的模块系统,它被称为 Angular 模块 或 NgModules。 Angular 模块都是一个带...

15520
来自专栏前端人人

React第三方组件5(状态管理之Redux的使用④TodoList下)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件5(状态管理之Redux的使用①简...

38950

扫码关注云+社区

领取腾讯云代金券