zoukankan      html  css  js  c++  java
  • 等高布局

    1、使用margin负边距:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      <style type="text/css">
        .parent{
          position:relative;
          overflow:hidden;
        }
        .left{
          background:red;
          left:0px;
        }
        .center{
          background:yellow;
        }
        .right{
          background:green;
        }
        .left,.center,.right{
          float:left;    
           padding-bottom: 500px;
          margin-bottom: -500px;
        }
        
      </style>
    </head>
    <body>
    <div class="parent">
        <div class="left">
            <p>left</p>
        </div>  
        <div class="center">
            <p>center</p>
            <p>center</p>
        </div>          
        <div class="right">
            <p>right</p>
        </div>        
    </div>
    </body>
    </html>
    

     2、使用table

    <html>
    <head>
    <style type="text/css">
    body,p{margin: 0;}
    .parent{
        display: table;
         100%;
        table-layout: fixed;
    }
    .left,.centerWrap,.right{
        display: table-cell;
    }
    .center{
        margin: 0 20px;
    }
    </style>
    </head>
    <body>
    <div class="parent" style="background-color: lightgrey;">
        <div class="left" style="background-color: lightblue;">
            <p>left</p>
        </div>  
        <div class="centerWrap">
            <div class="center" style="background-color: pink;">
                <p>center</p>
                <p>center</p>
            </div>         
        </div> 
        <div class="right" style="background-color: lightgreen;">
            <p>right</p>
        </div>        
    </div>
    </body>
    </html>
    

    3、使用flex

    <html>
    <head>
    <style>
    body,p{margin: 0;}
    .parent{
        display: flex;
    }
    .left,.center,.right{
        flex: 1;
    }
    .center{
        margin: 0 20px;
    }
    </style>
    </head>
    <body>
    <div class="parent" style="background-color: lightgrey;">
        <div class="left" style="background-color: lightblue;">
            <p>left</p>
        </div>  
        <div class="center" style="background-color: pink;">
            <p>center</p>
            <p>center</p>
        </div>          
        <div class="right" style="background-color: lightgreen;">
            <p>right</p>
        </div>        
    </div>
    </body>
    </html>
    

     4、使用grid

    <html>
    <head>
    <style>
    body,p{margin: 0;}
    .parent{
        display: grid;
        grid-auto-flow: column;
        grid-gap:20px;
    }
    </style>
    </head>
    <body>
    <div class="parent" style="background-color: lightgrey;">
        <div class="left" style="background-color: lightblue;">
            <p>left</p>
        </div>  
        <div class="center" style="background-color: pink;">
            <p>center</p>
            <p>center</p>
        </div>          
        <div class="right" style="background-color: lightgreen;">
            <p>right</p>
        </div>        
    </div>
    </body>
    </html>
    

     推荐使用table和margin负边距,简单好用,不存在兼容性

    gird,flex也很简单,但是兼容性不太好

    学而不思则罔,思而不结则殆,结而不看,一事无成
  • 相关阅读:
    Oracle11g 安装 -Linux
    oracle 11g安装-window
    将本地文件上传到github
    highcharts实现画辅助线功能并删除
    eclipse中一个项目引用另一个项目的方法
    Kubernetes label简单使用
    spark 报错 InvalidClassException: no valid constructor
    NFS服务配置 Linux
    Ubuntu-Server18.04开启无线网卡并配置静态ip
    Ubuntu18.04安装mysql并配置远程访问
  • 原文地址:https://www.cnblogs.com/windseek/p/8489434.html
Copyright © 2011-2022 走看看