不定高列表展示错乱

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

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

1-1解决方案:

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

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

简单示例代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
<!--//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主要代码示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*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主要代码示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*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;
}