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>
    右侧打赏一下 代码改变世界一块二块也是爱
  • 相关阅读:
    训练网络考虑内容
    阿斯顿
    wifi 模块Yeelink联网
    fpga串口通信的verilog驱动
    vga显示彩条
    状态机之二段式
    矩阵键盘
    error
    时钟
    Error(10028)
  • 原文地址:https://www.cnblogs.com/ht955/p/15173125.html
Copyright © 2011-2022 走看看