padding补偿法实现两列等高

最新推荐文章于 2020-10-02 21:15:23 发布

weixin_33709590

最新推荐文章于 2020-10-02 21:15:23 发布

阅读量152

点赞数

原文链接：https://juejin.im/post/5b365bc2f265da596a368974

版权

前言：

1.布局类问题文字太多会搞得很懵逼，通过代码更好理解(见下述代码)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>padding补偿法实现两列等高</title>
  <style>
    body{padding:0;margin:0;color:#00c;
      }
    .containter {
      margin:0 auto;
      width:600px;
      border:3px solid red;
      overflow: hidden;
    }
    .left{width:150px;background:#B0B000;
      float: left;
      padding-bottom: 2000px;
      margin-bottom:-2000px;}
    .right{
      width:450px;background: #66cccc;
      float: left;
      padding-bottom: 2000px;
      margin-bottom:-2000px;
    }
  </style>
</head>
<body>
<div class="containter">
  <div class="left">left<br><br><br><br><br><br><br>vsdf</div>
  <div class="right">right<br><br><br>khdsfgbuivydgfuvydfgvuydafgvusdyfgvu<br>又加了一行<br>dfbd</div>
  <div style="clear:both"></div>
</div>
</body>
</html>

复制代码

效果如下：

首先把列的padding-bottom设为一个足够大的值，再把列的margin-bottom设一个与前面的padding-bottom的正值相抵消的负值，父容器设置超出隐藏，这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到它里面最高那列的高度，其他比这列矮的列则会用它们的padding-bottom来补偿这部分高度差。因为背景是可以用在padding占用的空间里的，而且边框也是跟随padding变化的，所以就成功的完成了一个障眼法（补偿多少根据实际情况定，不过可以尽量大一点）。

2.如果 .right 的 div 没有设置相应的padding-bottom 和 margin-bottom , 那么当 .left 被撑开的高度大于 .right 时候，右侧就不会与左侧等高，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>padding补偿法实现两列等高</title>
  <style>
    body{padding:0;margin:0;color:#00c;
      }
    .containter {
      margin:0 auto;
      width:600px;
      border:3px solid red;
      overflow: hidden;
    }
    .left{width:150px;background:#B0B000;
      float: left;
      padding-bottom: 2000px;
      margin-bottom:-2000px;}
    .right{
      width:450px;background: #66cccc;
      float: left;
      /*padding-bottom: 2000px;*/
      /*margin-bottom:-2000px;*/
    }
  </style>
</head>
<body>
<div class="containter">
  <div class="left">left<br><br><br><br><br><br><br>jjjjj</div>
  <div class="right">right<br><br><br><br>又加了一行又怎么样<br></div>
  <div style="clear:both"></div>
</div>
</body>
</html>

复制代码

效果如下：

这个现象可以说明，当右边没有填充补偿时，实际高度不足以撑开和左边同样高时候，就无法实现两列登高 ，而如果被填充部分(左边)实际高度没有未被填充部分(右边)实际高度大，左侧仍然可以被撑开。（见下面代码）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>padding补偿法实现两列等高</title>
  <style>
    body{padding:0;margin:0;color:#00c;
      }
    .containter {
      margin:0 auto;
      width:600px;
      border:3px solid red;
      overflow: hidden;
    }
    .left{width:150px;background:#B0B000;
      float: left;
      padding-bottom: 2000px;
      margin-bottom:-2000px;}
    .right{
      width:450px;background: #66cccc;
      float: left;
      /*padding-bottom: 2000px;*/
      /*margin-bottom:-2000px;*/
    }
  </style>
</head>
<body>
<div class="containter">
  <div class="left">left<br><br><br>jjjjj</div>
  <div class="right">right<br><br><br><br><br><br><br><br><br>我们最高</div>
  <div style="clear:both"></div>
</div>
</body>
</html>


复制代码