<!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. 万物智联时代的终端智能「管家」 重磅升级：混合云IoT一体机

    ​简介: 「混合云IoT一体机」边缘部署.开箱即用.安全稳定.智管易用,通过定制软件和硬件相结合,预先定制.集成.测试和优化,实现快速部署和远程运维,并提升后续系统可用性和运维效率,是万物互联时代企业 ...

  2. [Blockchain] 开发完真实的 DApp 后才能得出的结论与看法

    1. 最近经常看到地方新闻有关 区块链在追踪溯源方面被实际应用,但是我本人认为这很大程度上可能是伪命题. 因为,是不是区块链.或者说有没有办法更改数据,这都很难说,本质上这个链还是由机构控制,所以对此 ...

  3. WPF 已知问题 清空 CollectionView 的 SortDescriptions 可能抛出空异常

    本文记录一个 WPF 的已知问题,在通过 CollectionViewSource 获取到 CollectionView 之后,如果 CollectionViewSource 对象已被 GC 回收,将 ...

  4. WPF 简单判断主线程界面是否卡顿的方法

    本文来告诉大家如何使用简单的代码判断当前的软件的 UI 线程或界面是否卡顿 在后台线程调用如下代码即可用来判断是否卡顿 private static async Task<bool> Ch ...

  5. 2018-2-13-win10-uwp-无法附加到CoreCLR

    title author date CreateTime categories win10 uwp 无法附加到CoreCLR lindexi 2018-2-13 17:23:3 +0800 2018- ...

  6. 有意思！一个关于 Spring 历史的在线小游戏

    发现 Spring One 的官网上有个好玩的彩蛋,分享给大家! 进到Spring One的官网,可以看到右下角有个类似马里奥游戏中的金币图标. 点击该金币之后,会打开一个新的页面,进入下面这样一个名 ...

  7. vue使用websoket（非封装）

    上代码: create:function(){ this.initWebpack() } methods:{ initWebpack(){//初始化websocket           let us ...

  8. 提取jks文件证书和私钥

    提取jks文件证书和私钥 JKS文件由公钥和密钥构成利用Java Keytool 工具生成的文件,它是由公钥和密钥构成的,公钥就是我们平时说的证书(.cer后缀的文件),私钥就是密钥(.key后缀的文 ...

  9. 推荐一款轻量级堡垒机系统让你防护“rm -rf 删库跑路”

    大家好,我是 Java陈序员. 我们在开发工作中,会经常与服务器打交道,而服务器的资源又是十分宝贵,特别是服务器里面的数据资源. 但是,偶尔会经常因为疏忽而导致服务器数据资源丢失,给自己和公司带来巨大 ...

  10. 以对象的方式访问html中的标签，比正则表达式更好用的方式获取html中的内容，linq方式直接获取所有的链接，更加先进的c#版本爬虫开源库

    这是我本人自己写的一个开源库,现已经发布到nuget,可以直接在vs的nuget包管理中搜索到,或者可以到nuget官网下载:https://www.nuget.org/packages/ZmjCon ...