如题，刚刚在项目中碰到这个，记录一下。
需求是两列的列表宽度各一半，高度可大可小，但要求每一行的两列对齐，数据是动态循环出来的。
一开始我把每个li的高度设定为一个定值，这样一般情况是没问题的；但是碰到内容过少或或大时问题就出现了，内容过少，底部太空；内容过多时，显示不全。要是不限定高度，你会发现，左右两个li高度不一致时就错位了；头疼不已啊！
错位图：
修改后：
其实思路也很简单，把同一行的两个li用一个元素包起来，这样即使两个li高度不一致也不会错位了。问题的关键在于数据时动态渲染进来的，静态页面我相信都没问题，动态渲染就要动动脑筋了，不说废话了，上代码，为方便起见，以下实例数据是写死的，有更好办法的欢迎交流。
<!doctype html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document
*{
margin:0;
padding:0;
}
li{
width:50%;
float:left;
list-style:none;
padding-bottom:10px;
}
img{
width:100%;
}
.clear:after{
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
<img src="zx.jpg" alt="">
<p>时间和的看法和思考的开发商的反馈
<p>skdfljsdlfjldsjfljlksjdlkfjs
<p>时间和的看法和思考的开发商的反馈
<img src="zx.jpg" alt="">
<p>时间和的看法和思考的开发商的反馈
<img src="zx.jpg" alt="">
<p>时间和的看法和思考的开发商的反馈
<p>skdfljsdlfjldsjfljlksjdlkfjs
<p>时间和的看法和思考的开发商的反馈
<img src="zx.jpg" alt="">
<p>时间和的看法和思考的开发商的反馈
<img src="zx.jpg" alt="">
<p>时间和的看法和思考的开发商的反馈
<p>skdfljsdlfjldsjfljlksjdlkfjs
<img src="zx.jpg" alt="">
<p>时间和的看法和思考的开发商的反馈
<p>时间和的看法和思考的开发商的反馈
<script typet="text/javascript" src="http://code.jquery.com/jquery-latest.js">
<script>
var len =$('li').length;
for(var i=0; i<len;i++){
if(i%2 ==0){
$('li').eq(i).before('<div class="clear index'+i+' "></div>');
$('.index' + i).append($('li').eq(i)).append($('li').eq(i+1));
}
}
</script>
</body>
</html>
网友评论