<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body,html{
            height:100%;
        }
        .left{
            width:200px;
            height:100%;
            background:pink;
            float:left;
        }
        .center{
            /* 计算中间板块的宽度   calc属于css3提供的一个功能函数 */
            width:calc(100% - 400px);
            height:100%;
            background:orange;
            float:left;
        }
        .right{
            width:200px;
            height:100%;
            background:green;
            float:left;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="center">111</div>
    <div class="right"></div>
</body>
</html>

01-布局扩展-用calc来计算实现双飞翼布局的更多相关文章

  1. 表格布局扩展/DW设计界面中快速整体布局页面的操作

    DW设计界面中快速整体布局页面的操作流程: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  2. HTML特殊布局--------双飞翼布局

    今天看到以前写的一篇布局的例子分享给大家,双飞翼布局. 什么是双飞翼布局?? 1.三列布局,中间宽度自适应,两边固定宽度; 2.中间栏在浏览器中优先展示渲染: 双飞翼布局的原理: 中间的盒子定100% ...

  3. CSS中的圣杯布局与双飞翼布局

    一,圣杯布局 1,什么是圣杯布局? 所谓圣杯布局就是用于实现一个两侧宽度固定,中间宽度自适应的三栏布局 2,构建圣杯布局的步骤: 2.1,添加一个容器,在这个容器中添加放三个盒子(左.中.右): 2. ...

  4. 【演示】在CSS里用calc进行计算

    请阅读 在CSS里用calc进行计算   下面的元素的width,padding,margin都使用了CSS calc进行计算. 简单计算: 100% – 100px 这是经过简单计算的元素宽度 复杂 ...

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

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

  6. Android 布局的一些控件的补充和布局的补充（今儿没课）

    前面写的博客可能会有点乱: 1,是不太会排版. 2,就是我一边看书,一边听学长讲课,所以有的知识就融入进去了,我写的都是自己的意见和理解,大家取我精华,弃我糟粕哈. 今天是书上的内容,主要讲布局的,一 ...

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

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

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

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

  9. css双飞翼布局

     双飞翼布局是一种比较灵活的布局,始于淘宝UED,玉伯提出的,他着重介绍的是双飞翼栅格布局. 三列布局为"双飞燕"布局,可以把三栏比作一只鸟,main部分相当是于鸟的身体,而lef ...

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

    圣杯布局 三行等高 HTML: <!DOCTYPE html><html><head>    <meta charset="utf-8"& ...

随机推荐

  1. 【.net】Error while trying to retrieve text for error ORA-06413

    [.net]Error while trying to retrieve text for error ORA-06413 系统需要,有一个外挂系统使用的是.net,出了问题,所以部署环境查询代码 但 ...

  2. 力扣142(Java)-环形链表Ⅱ（中等）

    题目: 给定一个链表的头节点  head ,返回链表开始入环的第一个节点. 如果链表无环,则返回 null. 如果链表中有某个节点,可以通过连续跟踪 next 指针再次到达,则链表中存在环. 为了表示 ...

  3. Maxcompute-UNION数据类型对齐的方法

    简介: 怎么对齐两段union脚本的数据类型 第1章      问题概述 1.1     UNION中隐式类型转换问题 近期参与的一个私有云项目要升级,因为maxcompute要升级到更新的版本,对之 ...

  4. 玩转DB里的数据 — 阿里云DMS任务编排之简介和实操

    1.任务编排介绍 数据库是企业IT系统里的重要基础设施,里面存储了大量有价值的数据资产,如:交易数据.客户数据.订单数据,等等.其实,数据库在企业里一直扮演着一个数据生产者(Producer)的角色, ...

  5. 21克：仅需3天，我们就用Quick BI搭建起数据驾驶舱

    ​简介:数智化并不仅仅是大型企业才需要去思考的课题,而是摆在所有企业面前的一个可选项.借助Quick BI搭建的数据分析体系,21克实现了销售.财务.供应链等多部门业务的数据化支撑,从一份份本地化的E ...

  6. Flagger on ASM·基于Mixerless Telemetry实现渐进式灰度发布系列 1 遥测数据

    简介: 服务网格ASM的Mixerless Telemetry技术,为业务容器提供了无侵入式的遥测数据.遥测数据一方面作为监控指标被ARMPS/prometheus采集,用于服务网格可观测性:另一方面 ...

  7. 如何基于Dataphin实现敏感数据保护

    ​简介: 在企业的发展过程中,如果不重视敏感数据的保护,和数据安全体系的建设,那么一旦发生了敏感数据泄漏事件,轻则企业口碑受损,业务受影响:重则会直接触法律,受到主管部门的处罚和制裁.本文将以一个最常 ...

  8. [GPT] php 报错 Unsupported operand types

    Unsupported operand types 这个错误通常发生在使用了不支持的操作数类型时.例如,当您尝试对两个不同类型的值执行算术运算时,就会出现这个错误. 例如,如果您尝试将字符串与数字相加 ...

  9. dotnet 警惕 Task 的 ContinueWith 带上 OnlyOnFaulted 参数抛出取消异常

    本文记录 dotnet 的一个令人迷惑的设计,在 Task 里,有一个叫 ContinueWith 的方法,此方法可以在 Task 完成时执行传入的委托.在 ContinueWith 方法里面,还有一 ...

  10. C#的基于.net framework的Dll模块编程（三） - 编程手把手系列文章

    继续这个系列的博文: 一.设置DLL类库信息: 在接解决方案资源管理器中选择该Dll程序集项目,鼠标右键,选择属性,打开窗口. 点击"程序集信息",打开并编辑该Dll程序集的相关信 ...