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抵消掉;

     

  • 相关阅读:
    java-线程(一)
    Lucene小例子
    Oracle在Java中事物管理
    sort quick
    static静态数据的初始化
    正则表达式30分钟入门教程
    div遮罩弹框口
    EL表达式
    LeetCode: Invert Binary Tree
    LeetCode: Find the Difference
  • 原文地址:https://www.cnblogs.com/lichaoqing/p/5674113.html
Copyright © 2011-2022 走看看