padding補償法實現兩列等高

Pivot發表於2018-06-29
padding

前言：

  • 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補償法實現兩列等高

首先把列的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>

複製程式碼

效果如下：

padding補償法實現兩列等高

這個現象可以說明，當右邊沒有填充補償時，實際高度不足以撐開和左邊同樣高時候，就無法實現兩列登高 ，而如果被填充部分(左邊)實際高度沒有未被填充部分(右邊)實際高度大，左側仍然可以被撐開。（見下面程式碼）

  • 3
<!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>


複製程式碼

效果如下：

padding補償法實現兩列等高

總結

既然是padding補償法，就是通過提前設定合適的padding來準備好提前量，當實際高度不足以填充至期望高度時，拿準備好的padding進行填充

相關文章