如题,刚刚在项目中碰到这个,记录一下。
需求是两列的列表宽度各一半,高度可大可小,但要求每一行的两列对齐,数据是动态循环出来的。
一开始我把每个li的高度设定为一个定值,这样一般情况是没问题的;但是碰到内容过少或或大时问题就出现了,内容过少,底部太空;内容过多时,显示不全。要是不限定高度,你会发现,左右两个li高度不一致时就错位了;头疼不已啊!
错位图:
修改后:
其实思路也很简单,把同一行的两个li用一个元素包起来,这样即使两个li高度不一致也不会错位了。问题的关键在于数据时动态渲染进来的,静态页面我相信都没问题,动态渲染就要动动脑筋了,不说废话了,上代码,为方便起见,以下实例数据是写死的,有更好办法的欢迎交流。
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
*{
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;
}
时间和的看法和思考的开发商的反馈
skdfljsdlfjldsjfljlksjdlkfjs
时间和的看法和思考的开发商的反馈
时间和的看法和思考的开发商的反馈
时间和的看法和思考的开发商的反馈
skdfljsdlfjldsjfljlksjdlkfjs
时间和的看法和思考的开发商的反馈
时间和的看法和思考的开发商的反馈
时间和的看法和思考的开发商的反馈
skdfljsdlfjldsjfljlksjdlkfjs
时间和的看法和思考的开发商的反馈
时间和的看法和思考的开发商的反馈
var len =$('li').length;
for(var i=0; i
if(i%2 ==0){
$('li').eq(i).before('');
$('.index' + i).append($('li').eq(i)).append($('li').eq(i+1));
}
}