动态内容等高布局的探索

前言

本文将用不同的方式实现动态内容的等高布局。

场景描述

首先不同内容的固定高度等高布局没有任何难度，本文讲的不是这种。本文讲的是，不同行级或者浮动元素具有不定高度时，将其他元素的高度填充为最大高度元素的高度这种场景。

<ul class="cont-wrap1">
  <li>12324134242342wrwt</li>
  <li>241</li>
</ul>  

方案 一 display:flex

特点：简单，高效，基本的现代浏览器都支持。

.cont-wrap1 {
  border:1px solid gray;
  padding:10px;
  overflow:hidden;
  display:flex;
  li{
  word-break:break-all;  
  margin-left:20px;
  border:1px solid red;  
  width:50px;}
}

方案 二 table 布局或者伪table

特点：没有兼容问题，但是元素显示不能符合预期（容器百分百的时候，元素设置的宽度无效；容器没有宽度的时候，不符合原来容器需求），而且比较受限于需要占满父容器,不过也是看你实际需求，有可能这正是你需要的。

.cont-wrap2 {
  border:1px solid gray;
  display:table;
  overflow:hidden;
  width:100px;
  li{
  display:table-cell;
  word-break:break-all;  
  border:1px solid red;  
  width:50px;}
}

方案 三 ：绝对定位

实现固定的等高

特点：参考同一个父模型，同时实现等高利用top,bottom

.cont-wrap3{
  border:1px solid gray;
  padding:10px;
  height:100px;
  position:relative;
  .main,.left{
    position:absolute;
  word-break:break-all;  
  border:1px solid red;  
    width:50px;
    top:0;
    bottom:0;
  }
  .left{
  left:0;
  }
  .main{
    left:50px;
  }
}

侧边栏根据内容实现变化等高

特点：需要指定好变化的内容是哪部分，根据依赖项等高的原理。

.cont-wrap4 {
   border:1px solid gray;
  position:relative;
  width:100px;
  .main{
    margin-left:50px;
    border:1px solid red;  
    word-break:break-all; 
  }
  .left{
    position:absolute;
  word-break:break-all;  
  border:1px solid red;  
    width:50px;
    top:0;
    bottom:0;
  }
  
}

方案 4 ：其他

利用背景图片

特点：纯效果模拟，利用整体布局的背景图片宽度相同，竖直方向重铺，各个元素的高度并未变化。不做过多的描述。

利用边框

特点：也是视觉效果的边框重合，并没有真实实现元素等高

.cont-wrap5 {
   border:1px solid gray;
  padding-left:50px;
  &:after{
    content:'';
    clear:both;
    display:table;
  }
  .left,.main{
    float:left;
    word-break:break-all;
  }
  .left{
    margin-left:-50px;
    width:50px;
    border-right:1px solid red;
  }
  .main{
    width:50px;
    margin-left:-1px;
    border-left:1px solid red;
    
  }
}

总结

综上，其实只要display:flex完整的能实现吧水平的浮动或者行内元素实现动态内容完整的等高布局。

参考

• 动态内容等高布局codePen案例