本文将用不同的方式实现动态内容的等高布局。
首先不同内容的固定高度等高布局没有任何难度,本文讲的不是这种。本文讲的是,不同行级或者浮动元素具有不定高度时,将其他元素的高度填充为最大高度元素的高度这种场景。
<ul class="cont-wrap1">
<li>12324134242342wrwt</li>
<li>241</li>
</ul>
特点:简单,高效,基本的现代浏览器都支持。
.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;}
}
特点:没有兼容问题,但是元素显示不能符合预期(容器百分百的时候,元素设置的宽度无效;容器没有宽度的时候,不符合原来容器需求),而且比较受限于需要占满父容器,不过也是看你实际需求,有可能这正是你需要的。
.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;
}
}
特点:纯效果模拟,利用整体布局的背景图片宽度相同,竖直方向重铺,各个元素的高度并未变化。不做过多的描述。
特点:也是视觉效果的边框重合,并没有真实实现元素等高
.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完整的能实现吧水平的浮动或者行内元素实现动态内容完整的等高布局。