<!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. SSM整合项目中使用百度Ueditor遇到的问题。

    问题描述:无法上传图片,提示配置项加载有问题 大致情形:直接下载的ue编辑器,放在了/resources/   目录下,也就是静态资源路径,然后更改web.xml,将tomcat默认拦截器配置放到所有 ...

  2. 力扣190(java)-颠倒二进制位（简单）

    题目: 颠倒给定的 32 位无符号整数的二进制位. 提示: 请注意,在某些语言(如 Java)中,没有无符号整数类型.在这种情况下,输入和输出都将被指定为有符号整数类型,并且不应影响您的实现,因为无论 ...

  3. 5年磨一剑｜优酷Android包瘦身治理思路全解

    简介: 稳定性.性能.包大小,在移动端基础用户体验领域"三分天下",是app承载业务获得稳定.高效.低成本.快速增长的重要基石.其中,包大小对下载转化率.拉新拉活成本等方面的影响至 ...

  4. 我们为什么要做 SoloPi

    SoloPi现状 去年(2019年)7月份,蚂蚁集团正式对外开源了客户端自动化测试工具 SoloPi ,其主要包括三大模块:录制回放(用于功能测试).性能工具(用于性能测试)以及一机多控(服务于兼容性 ...

  5. KubeVela + KEDA：为应用带来“与生俱来”的弹性伸缩能力

    简介: 在这篇博文中,我们将简要解释需要考虑的领域,KEDA 如何使应用自动伸缩变得简单,以及为什么阿里云企业分布式应用服务(EDAS)在 KEDA 上完全标准化. 联合作者 | Yan Xun,阿里 ...

  6. [FAQ] FastAdmin epay 微信公众号支付 JSAPI 支付必须传 openid ?

    使用 FastAdmin 的 epay 插件时,我们通过传不同的 method 决定支付方式. method=mp 时表示公众号支付,此时必须要 openid,但是插件里并没有说明如何获取. 其实这个 ...

  7. WPF 不安装 WindowsAppSDK 使用 WinRT 功能的方法

    安装 Microsoft.WindowsAppSDK 库会限制应用程序只能分发 windows 10 应用,如果自己的应用程序依然需要兼容 Win7 等旧系统,那直接采用安装 WindowsAppSD ...

  8. Apache Pulsar 桌面端图形化管理工具

    Apache Pulsar 桌面端图形化管理工具 Apache Pulsar 是 Apache 软件基金会顶级项目,是下一代云原生分布式消息流平台,集消息.存储.轻量化函数式计算为一体,采用计算与存储 ...

  9. sql计算列中并非零值的平均值

    avg不考虑空值 AVG (NULLIF(Value, 0)) NULLIF(expression, expression) 如果两个 expression 相等,则返回 NULL,该 NULL 为第 ...

  10. postgresql数据库清理

    大量update或者delete后 磁盘空间会猛增.原理是postgresql并没有真正的删除 只是将删除数据的状态置为已删除,该空间不能记录被从新使用.若是删除的记录位于表的末端,其所占用的空间将会 ...