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

    没等高布局之前:

    代码:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title></title>
      <style>
        .test{
         300px;
          margin:0 auto;color:#fff;
          background:#ccc;
        }
        .left{
          30%;float:left; background:green;
        }
        .right{
          70%;float:left;background:red;
        }
      </style>
    </head>
    <body>
    <div class="test">
       <div class="left">左</div>
       <div class="right">右<br>fdfd <br>hang <br>oooo</div>
    </div>
    </body>
    </html>
    

     效果图:

    登高布局之后: 

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title></title>
      <style>
        .test{
         300px;
          margin:0 auto;color:#fff;
          background:#ccc;
          overflow:hidden;
        }
        .left{
          30%;float:left; background:green;
          padding-bottom:1000px;
          margin-bottom:-1000px;
        }
        .right{
          70%;float:left;background:red;
          padding-bottom:1000px;
          margin-bottom:-1000px;
        }
      </style>
    </head>
    <body>
    <div class="test">
       <div class="left">左</div>
       <div class="right">右<br>fdfd <br>hang <br>oooo</div>
    </div>
    </body>
    </html>
    

     效果:

     总结:padding值可以被负的margin抵消掉;

     

  • 相关阅读:
    select函数
    ascy_finder|base|cookie 代码测试
    正则表达式之道
    教务系统破解
    jquery API
    test
    如何获取和发送Http请求和相应
    header中ContentDisposition的作用
    Performance Testing 系列
    LINQ
  • 原文地址:https://www.cnblogs.com/lichaoqing/p/5674113.html
Copyright © 2011-2022 走看看