CSS常见问题解决方案：不定高展示

2018-07-22

不定高列表展示错乱

很多时候，我们需要依次成列展示一些列表内容比如图书、图片等等，我们通常会使用float：left，但是如果有多行多列内容时，由于上一行的<li>或者<div>等元素内容不定高（比如图书标题有一行或两行）导致高度不一致，会使下一行的排列出现错乱。

CSS不定高列表展示错乱示意图

1-1解决方案：

摒弃浮动，使用行内块元素

CSS样式中去掉<li>或者<div>元素定义的float:left，使用display: inline-block定义属性；但是默认元素都是底部对齐，如果想顶部对齐，我们可以设置vertical-align: top;；在某些场景下排列会有莫名边距产生，导致排列错乱，我们还需要对外层父元素设置font-size:0。

简单示例代码如下：

<!--//html结构-->
<div class="rowWrap">
	<div class="heng" onclick="xq(201798)">
		<div class="imgWrap">
			<img src="/pic/201798/201798.jpg" />
		</div>
		<p class="read-ellipsis-2">弃少归来</p>
	</div>
	<div class="heng" onclick="xq(201798)">
	    <!--2/3/4/5/6元素-->
	</div>
</div>

CSS主要代码示例：

/*CSS代码示例*/
.rowWrap {
    width: 7.02rem;
    height: auto;
    font-size: 0;
}
.rowWrap .heng {
    width: 2.1rem;
    height: auto;
    margin-left: 0.36rem;
    /* float: left; */
    display: inline-block;
    vertical-align: top;
}

坚持浮动方案

这种方案也比较简单，只需要对每行（换行）的第一个元素增加设置clear:left，清除左侧浮动即可。

CSS主要代码示例：

/*CSS代码示例*/
.rowWrap {
    width: 7.02rem;
    height: auto;
}
.rowWrap .heng {
    width: 2.1rem;
    height: auto;
    margin-left: 0.36rem;
    float: left; 
}
.rowWrap .heng:nth-child(3n+1){
    margin-left:0;
    clear:left;
}