[CSS] 多种方式实现多列等高的方法

david2tdw commented 4 years ago

6种实现多列等高的方法

david2tdw commented 4 years ago

需求多列等高，要求左右两列高度自适应且一样，分别设置不同背景色

实现

padding + margin + overflow 实现多列等高效果，兼容性好
border实现多列等高，左边框宽度为200px，左列浮动，伪元素清除浮动
display：flex实现多列等高
display：grid实现多列等高
display:table-cell 实现多列等高

david2tdw commented 4 years ago

padding + margin + overflow 实现多列等高效果，兼容性好。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>多列等高</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .container {
        width: 1000px;
        margin: 0 auto;

        line-height: 2; /* 子元素如果没有重新定义line-height, 则会继承这个属性 */
        color: #fff;
      }
      /* container第一个div子元素 */
      .container > div {
        margin-bottom: 10px;
      }
      h2 {
        text-align: center;
        line-height: 60px;
        font-size: 20px;
        background-color: #00bcd4;
        color: #fff;
      }
      .g-padmar {
        overflow: hidden;
      }
      .g-padmar .g-left {
        float: left;
        width: 200px;
        background: #4caf50;
        padding-bottom: 9999px;
        margin-bottom: -9999px;
      }
      .g-padmar .g-right {
        float: left;
        width: 800px;
        background: #99afe0;
        padding-bottom: 9999px;
        margin-bottom: -9999px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h2>padding + margin + overflow，实现多列等高效果，兼容性好</h2>
      <div class="g-padmar">
        <div class="g-left">
          content
        </div>
        <div class="g-right">
          content<br />
          content<br />
          content<br />
          content<br />
        </div>
      </div>
    </div>
  </body>
</html>

说明： padding-bottom使内容撑开，负的margin-bottom使外边框上移直到遇到.g-right内容的高度为止，通过外层元素的 overflow: hidden; 属性，将超出的部分隐藏掉。

margin为负值产生的影响和常见布局应用

david2tdw commented 4 years ago

border实现多列等高，左边框宽度为200px，左列浮动，伪元素清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>多列等高</title>
<style>
  * {
    padding: 0;
    margin: 0;
  }
  .container {
    width: 1000px;
    margin: 0 auto;
    line-height: 2; /* 子元素如果没有重新定义line-height, 则会继承这个属性 */
    color: #fff;
  }
  /* container第一个div子元素 */
  .container > div {
    margin-bottom: 10px;
  }
  h2 {
    text-align: center;
    line-height: 60px;
    font-size: 20px;
    background-color: #00bcd4;
    color: #fff;
  }
  .g-border {
    width: 800px;
    border-left: 200px solid #4caf50;
    background: #99afe0;
  }
  .g-border::after {
    /*伪元素清除浮动*/
    content: '';
    display: block;
    clear: both;
  }
  .g-border .g-right {
    width: 800px;
  }
  .g-border .g-left {
    float: left;
    width: 200px;
    margin-left: -200px;
  }
</style>
</head>
<body>
<div class="container">
  <h2>border实现多列等高，左边框宽度为200px，左列浮动，伪元素清除浮动</h2>
  <div class="g-border">
    <div class="g-left">
      content
    </div>
    <div class="g-right">
      content<br />
      content<br />
      content<br />
      content<br />
    </div>
  </div>
</div>
</body>
</html>

说明： border实现多列等高，左边框宽度为200px, 将左侧内容浮动到左边框上面。

david2tdw commented 4 years ago

display：flex实现多列等高

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>多列等高</title>
<style>
  * {
    padding: 0;
    margin: 0;
  }
  .container {
    width: 1000px;
    margin: 0 auto;
    line-height: 2; /* 子元素如果没有重新定义line-height, 则会继承这个属性 */
    color: #fff;
  }
  /* container第一个div子元素 */
  .container > div {
    margin-bottom: 10px;
  }
  h2 {
    text-align: center;
    line-height: 60px;
    font-size: 20px;
    background-color: #00bcd4;
    color: #fff;
  }
  .g-flex {
    display: flex;
  }
  .g-flex .g-left {
    width: 200px;
    background-color: #4caf50;
  }
  .g-flex .g-right {
    width: 800px;
    background: #99afe0;
  }
</style>
</head>
<body>
<div class="container">
  <h2>display：flex实现多列等高</h2>
  <div class="g-flex">
    <div class="g-left">
      content
    </div>
    <div class="g-right">
      content<br />
      content<br />
      content<br />
      content<br />
    </div>
  </div>
</div>
</body>
</html>

david2tdw commented 4 years ago

display：grid实现多列等高

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>多列等高</title>
<style>
  * {
    padding: 0;
    margin: 0;
  }
  .container {
    width: 1000px;
    margin: 0 auto;
    line-height: 2; /* 子元素如果没有重新定义line-height, 则会继承这个属性 */
    color: #fff;
  }
  /* container第一个div子元素 */
  .container > div {
    margin-bottom: 10px;
  }
  h2 {
    text-align: center;
    line-height: 60px;
    font-size: 20px;
    background-color: #00bcd4;
    color: #fff;
  }
  .g-grid {
    display: grid;
    grid-template-columns: 200px auto;
  }
  .g-grid .g-left {
    background-color: #4caf50;
  }
  .g-grid .g-right {
    background: #99afe0;
  }
</style>
</head>
<body>
<div class="container">
  <h2>display：grid实现多列等高</h2>
  <div class="g-grid">
    <div class="g-left">
      content
    </div>
    <div class="g-right">
      content<br />
      content<br />
      content<br />
      content<br />
    </div>
  </div>
</div>
</body>
</html>

david2tdw commented 4 years ago

display:table-cell 实现多列等高

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>多列等高</title>
<style>
  * {
    padding: 0;
    margin: 0;
  }
  .container {
    width: 1000px;
    margin: 0 auto;
    line-height: 2; /* 子元素如果没有重新定义line-height, 则会继承这个属性 */
    color: #fff;
  }
  /* container第一个div子元素 */
  .container > div {
    margin-bottom: 10px;
  }
  h2 {
    text-align: center;
    line-height: 60px;
    font-size: 20px;
    background-color: #00bcd4;
    color: #fff;
  }
  .g-table {
    display: table;
    overflow: hidden;
  }
  .g-table .g-left {
    display: table-cell;
    width: 200px;
    /* width: ; */
    background-color: #4caf50;
  }
  .g-table .g-right {
    width: 800px;
    background: #99afe0;
  }
</style>
</head>
<body>
<div class="container">
  <h2>display:table-cell 实现多列等高</h2>
  <div class="g-table">
    <div class="g-left">
      content
    </div>
    <div class="g-right">
      content<br />
      content<br />
      content<br />
      content<br />
    </div>
  </div>
</div>
</body>
</html>

CSS——布局布局神器display:table-cell

david2tdw / blog

[CSS] 多种方式实现多列等高的方法 #130