多列等高布局

在编写HTML页面时, 可能会要使用到多栏布局, 如果栏目带有背景色且内容高度不一致时, 会导致每个栏目底部无法对齐, 这样的排版布局和用户体验都不是很好.

期望的效果

使各个栏目内容不一样, 但各栏目是对齐的, 高度一致. 如下图所示:

解决办法

HTML代码结构如下

 <div class="content">
   <ul class="clearfix">
     <li>
       <p>在编写HTML页面时, 可能会要使用到多栏布局, 如果栏目带有背景色且内容高度不一致时, 
       会导致每个栏目底部无法对齐, 这样的排版布局和用户体验都不是很好. </p>
     </li>
     <li>
       <p>hello world! hello james!</p>
     </li>
     <li>
       <p>在编写HTML页面时, 可能会要使用到多栏布局, 如果栏目带有背景色且内容高度不一致时, 
       会导致每个栏目底部无法对齐, 这样的排版布局和用户体验都不是很好. </p>
     </li>
   </ul>
 </div>

1. 使用负margin-bottom & 正padding-bottom对冲实现

元素设置的padding-bottom尽可能大些, 并需要设置一样margin-bottom负值, 去抵消padding-bottom撑大的区域, 正负一抵消, 对于页面布局不会影响.
还需设置父元素overflow: hidden, 把子元素多余的色块隐藏起来.

<style lang="less" scoped>
.content{
  .clearfix::after{content:'';display:block;height:0;visibility:hidden;clear:both;}
  ul{
    margin: 0;
    padding: 0;
    overflow: hidden;
    li{
      float: left;
      list-style: none;
      margin: 0 10px -99999px 0;
      padding-bottom: 99999px;
      color: #fafafa;
      box-sizing: border-box;
      background-color: #0071ff;
      width: calc(33.3% - 10px);
      p{
        padding: 20px;
      }
    }
  }
}
</style>

2. table布局


<style lang="less" scoped>
.content{
  ul{
    padding: 0;
    margin: 0;
    display: table;
    width: 100%;
    table-layout: fixed;
    li{
      display: table-cell;
      list-style: none;
      border-left: solid 5px currentColor;
      border-right: solid 5px currentColor;
      background-color: #0071ff;
      box-sizing: border-box;
      width: calc(100% / 3 );
      p{
        color: #fafafa;
        padding: 20px;
      }
    }
  }
}
</style>

table元素中的table-cell元素默认都是等高的.

3. flex 布局


<style lang="less" scoped>
.content{
  ul{
    display: flex;
    margin: 0;
    padding: 0;
    li{
      flex: 1;
      list-style: none;
      border-left: solid 5px currentColor;
      border-right: solid 5px currentColor;
      background-color: #0071ff;
      box-sizing: border-box;
      p{
        color: #fafafa;
        padding: 20px;
      }
    }
  }
}
</style>

::: warning 注意 flex中的伸缩项目默认拉伸为父元素的高度, 同样可以实现等高效果. 在PC端兼容性不是很好, 在IE9及IE9以下不支持. :::

4. grid布局

<style lang="less" scoped>
.content{
  ul{
    display: grid;
    grid-auto-flow: column;
    grid-gap: 10px;
    margin: 0;
    padding: 0;
    li{
      list-style: none;
      border-left: solid 5px currentColor;
      border-right: solid 5px currentColor;
      background-color: #0071ff;
      box-sizing: border-box;
      p{
        color: #fafafa;
        padding: 20px;
      }
    }
  }
}
</style>

::: warning 注意 grid布局的缺点与flex一样, PC端兼容性不是很好, 在IE9及IE9以下不支持. :::

5. JavaScript实现

样式代码部分

<style lang="less" scoped>
.content{
  .clearfix::after{content:'';display:block;height:0;visibility:hidden;clear:both;}
  ul{
    margin: 0;
    padding: 0;
    overflow: hidden;
    li{
      float: left;
      list-style: none;
      margin: 0 5px;
      color: #fafafa;
      box-sizing: border-box;
      background-color: #0071ff;
      width: calc(33.3% - 10px);
      p{
        padding: 20px;
      }
    }
  }
}
</style>

JavaScript代码逻辑

遍历ul下的所有li元素
取得li元素的最大高度
给所有li元素设置相同的height

JavaScript就省略了, 不建议使用JS来解决布局问题, 宜尽量使用CSS样式来解决

CSS多列等高布局