项目中遇到的问题,生产商信息这个页面,每个生产商信息会出现有时字多,有时字少的情况,为了保持在字数变多的情况下margin值缩小,字数变少的情况下margin值变大,整体页面布局会更美观,用JS判断,demo如下;
HTML部分
<div class="infor">
<div><span>名 称:</span><p>(说)分的呵呵的的额的的的</p></div>
<div><span>编 号:</span><p>说的呵呵的的的额的的</p></div>
<div><span>规 格:</span><p>说的呵呵的的的说的</p> </div>
<div><span>材 质:</span><p>说的呵呵的的的额的</p> </div>
<div><span>价 格:</span><p>1525881</p> </div>
<div><span>生产商:</span> <p>说的的的呵呵的</p></div>
</div>
css部分
.infor{z-index:99;left:15%;top:26%;position:absolute;overflow:auto;font-size: 26px;color:#163168;width:70%;}
.infor div{overflow:hidden;margin-bottom:4%;}
.infor span{display:block;float:left;}
.infor p{float:right;width:72%;}
js部分
<script>
var j=0;
// alert($("p").eq(0).text().length);
for(var i=0;i<$("p").length;i++){
var str = $("p").eq(i).text();
if(str.indexOf("(") >= 0 ){
if(str.length>13 && i!=1){
j=1;
}
}else{
if(str.length>12 && i!=1){
j=1;
}
}
}
// alert(j);
if(j==1){
$(".infor>div").css("margin-bottom","4%");
}
else{
$(".infor>div").css("margin-bottom","7%");
}
</script>