<!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. 力扣412(java)-Fizz Buzz（简单）

    题目: 给你一个整数 n ,找出从 1 到 n 各个整数的 Fizz Buzz 表示,并用字符串数组 answer(下标从 1 开始)返回结果,其中: answer[i] == "FizzB ...

  2. 使用 Databricks 进行营销效果归因分析的应用实践【Databricks 数据洞察公开课】

    简介: 本文介绍如何使用Databricks进行广告效果归因分析,完成一站式的部署机器学习,包括数据ETL.数据校验.模型训练/评测/应用等全流程. 作者:冯加亮   阿里云开源大数据平台技术工程师 ...

  3. 怀里橘猫柴犬，掌上代码江湖——对话阿里云 MVP郭旭东

    简介: 跟郭旭东聊过之后,我对程序员的敬佩又多一分.这个92年的开发者,难能可贵地兼备朝气蓬勃的技术能量与长远深刻的行业洞见.独自承担DevOps平台从0到1的所有工作,我打趣说超级开发者不过如此,他 ...

  4. 如何使用 PTS 快速发起微服务压测

    ​简介:本文讲阐述什么是微服务架构.微服务架构对系统稳定性带来的影响,以及用性能测试验证稳定性的必要性.用户进行微服务压测的痛点和 PTS 的独特优势.云上使用 PTS 快速发起微服务压测的步骤,以及 ...

  5. dubbo-go v3 版本 go module 踩坑记

    简介: 该问题源于我们想对 dubbo-go 的 module path 做一次变更,使用 dubbo.apache.org/dubbo-go/v3 替换之前的 github.com/apache/d ...

  6. [Caddy2] Caddyfile 使用其它 DNS provider

    安装 caddy 的 dns provider 模块. https://github.com/caddy-dns/cloudflare 如果是在 Docker 中 build 模块按文档进行,通过 c ...

  7. Oracle、达梦：生成32位字符串（ID）

    15.生成32位字符串 达梦.oracle 函数:sys_guid().newid() 转小写LOWER(char) select rawtohex(sys_guid()); -- 推荐使用newid ...

  8. 羽夏闲谈——TeeWorlds 中文问题

      不久前 削微寒 园友发布了一篇博文 误入 GitHub 游戏区,意外地收获颇丰 ,看到了一个游戏 TeeWorlds .有一说一挺好玩的,下面是那个博客的原图:   官方的下载连接:https:/ ...

  9. ubuntu16下升级python3的版本--升级到3.8

    ubuntu16下升级python3的版本,这里是升级到3.8. 1.首先添加安装源,在命令行输入如下命令: $ sudo add-apt-repository ppa:jonathonf/pytho ...

  10. CSS布局概念与技术教程

    以下是一份CSS布局学习大纲,它涵盖了基本到高级的CSS布局概念和技术 引言 欢迎来到CSS教程!如果你已经掌握了HTML的基础知识,那么你即将进入一个全新的世界,通过学习CSS(Cascading ...