动态内容等高

动态内容等高

一、前言

• 场景：不同行级或者浮动元素具有不定高度时，将其他元素的高度填充为最大高度元素的高度。

二、HTML结构

使用CSS实现容器长宽比，常见的HTML模板结构如下：

<ul class="cont-wrap">
    <li class="left">动态内容等高布局动态内容等高布局动态内容等高布局动态内容等高布局</li>
    <li class="left">动态内容等高布局</li>
</ul>

三、实现方案

3.1.display:flex

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

.cont-wrap {
    display:flex;
}
.cont-wrap li{
    margin-left:20px;
    background: #ff0097;
    width:50px;
}

3.2. table 布局或者伪table

.cont-wrap {
    display:table;
    width:100%;
}
.cont-wrap li{
    display:table-cell;
    word-break:break-all;  
    border:1px solid red;  
    width:50px;
}

3.3.绝对定位

1）实现固定的等高

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

.cont-wrap {
  height:500px;
  position:relative;
}
.main,.left{
    position:absolute;
    border:1px solid red;  
    width:50px;
    top:0;
    bottom:0;
}
.left{
  left:0;
}
 .main{
  left:50px;
}

3.4.padding+margin

• 特点：没有兼容性问题，可以实现动态等高,原理是在浮动元素里添加一个padding+margin值的盒模型，需要注意的是padding的值要足够大。

.cont-wrap {
    overflow:hidden;
    border:1px solid red;
}
.left,.main{
    margin-left:20px;
    float:left;
    word-break:break-all;
    width:50px;
    padding-bottom:3000px;
    margin-bottom:-3000px;
    border:1px solid gray; 
}

3.5.利用背景图片

特点：利用整体布局的背景图片宽度相同，竖直方向重铺，视觉上等高，实际各个元素的高度并未变化。