zoukankan      html  css  js  c++  java
  • 中间定宽,两边自适应布局的三种实现方法

    中间定宽,两边自适应布局的三种实现方法

    1. 浮动加定位

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>中间定宽,两边自适应</title>
        <style type="text/css">
        html,body,div{
            height: 100%;
        }
        .parent{
            position: relative;
            overflow: hidden;
        }
        .left{
            float: left;
             50%; 
            margin-left: -150px;
            background-color: red;
        }
        .right{
             float: right;
             50%; 
            margin-right: -150px;
            background-color: yellow;
        }
        .center{
            position: absolute;
            left:50%;
            transform:translateX(-50%);
             300px;
            background-color: green;
        }
        .left .item{
            margin-left: 150px;
        }   
        .right .item{
            margin-right: 150px;
        }   
        </style>
    
    </head>
    <body>
        <div class="parent">
        <div class="left">
            <div class="item"></div>
        </div>
        <div class="right">
            <div class="item"></div>
        </div>
        <div class="center">
            <div class="item"></div>
        </div>
    
        </div>
    </body>
    </html>

    2. calc计算法

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>中间定宽,两边自适应</title>
        <style type="text/css">
        html,body,div{
            height: 100%;
        }
        .left{
             calc(50% - 150px);
            float: left;
            background-color: red;
        }
        .right{
             calc(50% - 150px);
            float: right;
            background-color: yellow;
        }
        .center{
             300px;
            float: left;
            background-color: green;
        }
    /*也可以将这三个div设置成display:inline-block,这样就不浮动了*/
        </style>
    </head>
    <body>
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </body>
    </html>

    3. 弹性盒子法

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>中间定宽,两边自适应</title>
        <style type="text/css">
        html,body,div{
            height: 100%;
        }
        .parent{
            display: flex;
        }
        .left{
            flex:1;
            background-color: red;
        }
        .right{
            flex:1;
            background-color: yellow;
        }
        .center{
           
             300px;
            background-color: green;
        }
    
        </style>
    </head>
    <body>
        <div class="parent">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
        </div>
    </body>
    </html>
  • 相关阅读:
    关于C#静态函数什么时候被调用的问题
    Visual Studio调试之断点技巧篇
    使用MPLex实现语法高亮显示的功能
    Generate Ellipsoid画椭球用MATLAB
    matlab学习
    12.17 V155 Q169. 机经加感悟。
    GRE阅读
    Matlab7.0程序启动后自动退出问题
    远程打开MATLAB
    Resin是CAUCHO公司的产品,是一个非常流行的application server,对servlet和JSP提供了良好的支持,性能也比较优良,resin自身采用JAVA语言开发。
  • 原文地址:https://www.cnblogs.com/yzhihao/p/6520625.html
Copyright © 2011-2022 走看看