<!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. 构建RAG应用-day01: 词向量和向量数据库 文档预处理

    词向量和向量数据库 词向量(Embeddings)是一种将非结构化数据,如单词.句子或者整个文档,转化为实数向量的技术. 词向量搜索和关键词搜索的比较 优势1:词向量可以语义搜索 比如百度搜索,使用的 ...

  2. CF1913C Game with Multiset 题解

    [题目描述] 你有一个空的多重集,你需要处理若干下列询问: ADD $ x $:加入一个数值为 $ 2^x $ 的元素到该多重集. GET $ w $:判断是否存在一个该多重集的子集,使得这个子集的所 ...

  3. 解决方案｜致拓T8数字化ERP

    ​简介:通过快速构建敏捷ERP系统,实现从销售到财务的全流程闭环管理,助力企业数字化升级. 「致拓T8数字化ERP」解决方案聚焦业财一体,助力企业卓有成效地提升经营收益,赋能企业个性化数字生产管理.本 ...

  4. 汽车之家：基于 Flink + Iceberg 的湖仓一体架构实践

    简介: 由汽车之家实时计算平台负责人邸星星在 4 月 17 日上海站 Meetup 分享的,基于 Flink + Iceberg 的湖仓一体架构实践. 内容简要: 一.数据仓库架构升级的背景 二.基于 ...

  5. 时序数据库永远的难关 — 时间线膨胀(高基数 Cardinality)问题的解决方案

    ​简介: 本文主要讨论 influxdb 在遇到写入的数据出现高基数 Cardinality 问题时,一些可行的解决方案. 作者 | 徐建伟 (竹影) 前序 随着移动端发展走向饱和,现在整个 IT 行 ...

  6. FFmpeg开发笔记（十七）Windows环境给FFmpeg集成字幕库libass

    ​libass是一个适用于ASS和SSA格式(Advanced Substation Alpha/Substation Alpha)的字幕渲染器,支持的字幕类型包括srt.ass等,凡是涉及到给视频画 ...

  7. Soluton Set - ZJOI历年真题

    upd:不考浙江省选了.这个题解贴应该不会再更新了. upd:进省队了.再做点,再写点. ZJOI2022 Day1T1 Link&Submission. tag:组合计数,容斥 假设固定了第 ...

  8. JAVA也能用上Seq啦

    前言 在.NET生态中,Serilog凭借其强大的结构化日志记录功能和与Seq的无缝集成,已经成为许多开发者的首选日志记录工具.Seq作为一个日志检索和仪表板工具,能够将日志中的插值转换为结构化数据, ...

  9. ITIL一定要去认证吗？哪个版本合适

    关于ITIL的演进 ITIL是在演进发展中的,v1并不成功,v2 v3讲究流程与控制,其实都是偏向务虚,理论东西较多,能落地的少或许OGC的专家们自己也发现 光靠口头忽悠并不能说服最终用户接受ITIL ...

  10. WEB服务与NGINX（17）- https协议及使用nginx实现https功能

    目录 1. https协议及使用nginx实现https功能 1.1 https协议概述 1.2 TLS/SSL协议原理 1.3 https的实现原理 1.4 使用openssl申请证书 1.5 ng ...