圣杯布局(float + 负margin + padding + position)

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8" />

    <title>圣杯</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .main{

            float: left;

            width: 100%;

            height: 500px;

            background:red;

        }

        .sub{

            position: relative;

            float: left;

            left: -200px;

            width: 200px;

            height: 500px;

            margin-left: -100%;

            background:blue;

        }

        .extra{

            position: relative;

            float: left;

            right: -180px;

            width: 180px;

            height: 500px;

            margin-left: -180px;

            background:green;

        }

        .content{

            padding: 0 180px 0 200px;

        }

    </style>

  </head>

  <body>

     <!-- 圣杯布局(float + 负margin + padding + position) -->

    <div class="content">

        <div class="main"></div>

        <div class="sub"></div>

        <div class="extra"></div>

    </div>

  </body>

</html>

双飞翼布局(float + 负margin + margin)

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8" />

    <title></title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .content{

            float: left;

            width: 100%;

            height: 500px;

            background:red;

        }

        .sub{

            float: left;

            width: 200px;

            height: 500px;

            margin-left: -100%;

            background:blue;

        }

        .extra{

            float: left;

            width: 180px;

            height: 500px;

            margin-left: -180px;

            background:green;

        }

        .main{

            margin: 0 180px 0 200px;

        }

    </style>

  </head>

  <body>

    <!--  双飞翼布局(float + 负margin + margin) -->

    <div class="content">

        <div class="main"></div>

    </div>

    <div class="sub"></div>

    <div class="extra"></div>

  </body>

</html>

flex布局

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8" />

    <title></title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .content{

            display: flex;

        }

        .sub{

            width: 200px;

            height: 500px;

            background:blue;

        }

        .main{

            flex:1;

            height: 500px;

            background:red;

        }

        .extra{

            width: 180px;

            height: 500px;

            background:green;

        }

    </style>

  </head>

  <body>

    <!--  flex布局 -->

    <div class="content">

        <div class="sub"></div>

        <div class="main"></div>

        <div class="extra"></div>

    </div>

  </body>

</html>

一样效果，不一样的布局。如下：

CSS布局（圣杯、双飞翼、flex）的更多相关文章

  1. CSS布局 -- 圣杯布局 & 双飞翼布局

    按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...

  2. CSS布局-圣杯布局

    圣杯布局 圣杯布局很完美(兼容所有浏览器,包括IE6),但是使用了相对定位,布局有局限性,宽度控制要改的地方也多. 第一种方法公用部分: .lgyz, .lzrg, .lrzcg, .lcgrz, . ...

  3. CSS布局 — 圣杯布局与双飞翼布局

    圣杯布局 实现原理 html代码中,middle部分首先要放在container的最前部分,然后是left,right 将三者都设置 float:left, position:relative (因为 ...

  4. CSS布局经典—圣杯布局与双飞翼布局

    在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...

  5. css两栏布局、圣杯布局、双飞翼布局

    最近几个月一直用vue在写手机端的项目,主要写业务逻辑,在js方面投入的时间和精力也比较多.这两天写页面明显感觉css布局方面的知识有不足,所以复习一下布局方法. 两栏布局 1.浮动 .box1 .l ...

  6. CSS经典布局-圣杯布局、双飞翼布局

    圣杯布局的来历是2006年发在a list part上的这篇文章:In Search of the Holy Grail · An A List Apart Article圣杯是西方表达“渴求之物&q ...

  7. css布局笔记（三）圣杯布局，双飞翼布局

    圣杯布局和双飞翼布局都是三列布局,两边定宽,中间自适应布局,中间栏要在放在文档流前面以优先渲染. 圣杯布局如下 <!-- 圣杯布局 --> <!DOCTYPE html> &l ...

  8. CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局

    圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局 虽然两者的实现方法略有差异,不过都遵循了以下要点: 1.两侧宽度固定 ...

  9. CSS 之 圣杯布局&双飞翼布局

    圣杯布局 和 双飞翼布局 是重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局. 遵循了以下要点: 两侧宽度固定,中间宽度自适应 中间部分在DOM结构上优先,以便先行 ...

  10. CSS布局之圣杯布局和双飞翼布局

    其实圣杯布局和双飞翼布局实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固比固布局.它们实现的效果都是一样的,差别在于其实现的思想. 一.圣杯布局 html代码中,将重要的内容 ...

随机推荐

  1. JavaIO流——简单对文件的写入及读取（三）

    已经讲了写入和读取了,那么想要把一个文件的内容复制到另一个文件呢 不说太多,直接见代码 public static void copyFile(String srcFilename, String d ...

  2. Qt QLineEdit 漂亮的搜索框 && 密码模式 && 格式化输入 && 提示文字 && 选择内容并移动 && 清除全部输入

    先上一个漂亮的搜索框效果图, 输入搜索文本效果, 点击搜索图标效果: //实现代码 void MainWindow::iniLineEdit() { ui->lineEdit->setPl ...

  3. Easyui form提交后input清空的方法

    先上解决办法: $(#formid #inputid).val("") 将这个代码放在提交按钮最后就可以了. 我在做一个修改信息的功能时,发现上一次提交的内容在下一次打开的记录里又 ...

  4. C#调用java方法踩坑记

    首先,我的java代码写了一个遗传算法,这是我硕士毕业论文的核心算法,项目是基于C#的web项目.但是现在又不想用C#重写遗传算法代码,于是就想用C#去调用java的代码.在网上找了方法,一般有两种: ...

  5. 洛谷 K短路（魔法猪学院）

    A*+迪杰特斯拉... 第十一个点卡爆 不管了 #include<iostream> #include<algorithm> #include<cstring> # ...

  6. Linux 磁盘挂载分区

    举例说明: 新增磁盘的设备文件名为 /dev/vdb 大小为100GB. #fdisk -l 查看新增的的磁盘 1.对新增磁盘进行分区 #fdisk /dev/vdb 按提示操作 p打印 n新增 d ...

  7. PHP 不同类型之间的松散和严格比较

    原始数据类型 在比较之前先简单介绍一下PHP的9种原始数据类型,包括 四种标量类型: boolean(布尔型) integer(整型) float(浮点型,也称作 double) string(字符串 ...

  8. Hive中常用的参数配置

    -- 查看当前环境参数配置set -v;-- 重置配置为默认值reset; -- 调整map数-- input的文件大小,集群设置的文件块大小,hive中通过set dfs.block.size;命令 ...

  9. python中List append()、extend()和insert()的区别

    Python中向列表增加更多数据时,有append().extend()和insert()等方法 其中最常用的是list.append(obj) 向列表的尾部添加一个新的元素. 需要一次性添加多个元素 ...

  10. 高校表白APP-冲刺第一天

    今天我们开了第一次会议, 一.任务: 今日任务布局登录页面,注册页面,修改密码界面 明日任务完成基本的登录页面框架 二.遇到的困难: 布局文件里的一些标签,用法不清楚,页面跳转都得学习.