margin值根据标签文本内容变化
来源:互联网 发布:淘宝上的电子烟可靠吗 编辑:程序博客网 时间:2024/06/05 05:54
项目中遇到的问题,生产商信息这个页面,每个生产商信息会出现有时字多,有时字少的情况,为了保持在字数变多的情况下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>
- margin值根据标签文本内容变化
- cell根据文本标签内容自适应高度
- 根据文本内容自动计算文本高度
- input长度根据输入内容变化
- 使视图可以根据选择的内容变化而变化
- html之标签切换内容变化
- 获取select标签的文本内容以及Value值
- as3 TextField 宽度根据文本内容自适应
- iOS UILable根据文本内容自适应高度
- 根据文本内容计算cell的高度
- 【iOS】根据文本内容确定文本框高度
- UItableView分割线根据文本内容显示
- 根据文本内容调整Button大小
- MATLAB 根据条件修改TXT文本内容
- 基于Java数据库应用中如何根据Jtable的model值变化引起table内容自动
- margin标签
- Python3学习笔记 根据标签截取内容
- textarea文本域的高度随内容的变化而变化(适用于编辑文本)
- Android侧滑菜单
- HTML 导入导出
- OpenCV学习之Hough变换检测直线
- spring 配置多数据源
- Python-起源
- margin值根据标签文本内容变化
- Android 自定义TextView实现文字渐变动画
- 反射——慕课网笔记
- nodejs和springmvc http服务接口的session共享问题
- Python 实现,make bricks
- BZOJ 3884 上帝与集合的正确用法 (欧拉函数 找递推公式)
- Jdbc封装公共CRUD方法,十分简便
- 超级简单的Android Studio jni 实现(无需命令行)
- 2.2线性表的顺序表示和实现