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>
    右侧打赏一下 代码改变世界一块二块也是爱
  • 相关阅读:
    ROS 八叉树地图构建
    2020
    Ubuntu 16.04 配置开机自动挂载 NTFS 机械硬盘!
    从 0 开始机器学习
    Ubuntu Install kitti2bag
    Ubuntu install sublime-text3
    Ubuntu 修复不能访问正确挂载机械硬盘的问题
    Ubuntu 16.04 安装 NVIDIA 显卡驱动!
    ROS 机器人技术
    phpMyAdmin getshell 学习
  • 原文地址:https://www.cnblogs.com/ht955/p/15173125.html
Copyright © 2011-2022 走看看