zoukankan      html  css  js  c++  java
  • 01-布局扩展-用calc来计算实现双飞翼布局

    <!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{
                200px;
                height:100%;
                background:pink;
                float:left;
            }
            .center{
                /* 计算中间板块的宽度   calc属于css3提供的一个功能函数 */
                calc(100% - 400px);
                height:100%;
                background:orange;
                float:left;
            }
            .right{
                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>
    右侧打赏一下 代码改变世界一块二块也是爱
  • 相关阅读:
    Modernizr.js:为HTML5和CSS3而生!
    liunx 安装 phpstudy
    php 实现无限极分类
    网站邮箱端口
    android studio svn 创建分支
    卡在 构建 gradle 项目信息
    android 地图
    IllegalArgumentException: Unmatched braces in the pattern.
    软件设置开机启动
    输入网络凭据
  • 原文地址:https://www.cnblogs.com/ht955/p/15173125.html
Copyright © 2011-2022 走看看