手机端列表常用的布局
手机端列表常用的布局
注意：图片实现自适应，在不同的设备上等比缩放。
左右布局
HTML:
<h2>左右布局</h2>
<div class="box1"> <div class="item" v-for="item in 3" :key="item"><div class="left"><img src="../assets/1.jpg" alt=""></div><div class="right"><h5>标题标题标题标题标题标题标题标题标题标题标题标题标</h5><div class="btm">底部 <br><span>内容内容内容内容内容内容</span></div></div></div>
</div>CSS:
<style lang="less" scoped>.box1{padding: 1rem;box-sizing: border-box;.item {display: flex;box-shadow: 2px 7px 10px 0 rgba(222, 222, 222, 0.5);margin-bottom: 2rem;.left {width: 50%; //自定义eg:45%。padding-bottom: calc(50%*100/179); //距离底部的距离与图片比例一致 自适应布局 这里的百分比与上面的width一致eg:45%。position: relative;flex-shrink: 0; //图片不压缩 width时百分比。img {position: absolute;left:0;top:0;width:100%; //父级有宽此处100%。height:100%; //父级padding-bototm计算完后 height自动撑满。border-radius:.5rem ;display: block;}}.right {flex-grow: 1; //平分剩余空间。padding: 1rem;box-sizing: border-box;position: relative;border-top:1px solid #f0f0f0;border-right:1px solid #f0f0f0;border-bottom:1px solid #f0f0f0;.btm {width: calc(100% - 1rem);position: absolute;bottom: 0.2rem;left:1rem;}}}}
</style>
效果图：
两列布局
HTML:
<h2>两列布局</h2>
<div class="box2"><div class="item" v-for="item in 5" :key="item"><div class="top"><img src="../assets/1.jpg" alt=""></div><div class="btm"><h4>标题标题标题标题标题标题标题标题</h4><div class="min-btm">内容内容内容内容内容内容内容内容内容</div></div></div>
</div>
CSS:
.box2 {// display: flex; //2列布局：第一种方法。// flex-wrap: wrap;// display: block;padding: 1rem;box-sizing: border-box;overflow: hidden;.item {float: left; //2列布局：第二种方法 注意清浮动。width: calc((100% - 1rem)/2); //两列/2三列/3 减去margin的长度 需调整nth-child的margin（自查）。margin-bottom: 2rem;box-shadow: 2px 7px 10px 0 rgba(222, 222, 222, 0.5);// margin-left: 1rem;.top {padding-bottom: calc(100%*97/172);position: relative;img{position: absolute;left:0;top:0;width: 100%;height:100%;display: block;}}.btm {position: relative;height: 8.5rem; // 当动态渲染时数据可能会有一行或者两行，img列表盒子会不等高 1.底部定高。h4 {margin-left:1rem;}.min-btm {width: calc(100% - 1rem);position: absolute; //2.定位通过btm+left来定位到底部盒子的底部。bottom: 0.2rem;left:1rem;}}}.item:nth-child(2n-1) { //选中第一列margin-right: 1rem;}
}
效果图：
三列布局：
HTML:
<h2 >三列布局</h2>
<div class="box3"><div class="item" v-for="item in 5" :key="item"><div class="top"><img src="../assets/1.jpg" alt=""></div><div class="btm"><h4>标题标题标题标题标题标题标题标题</h4><div class="min-btm">内容内容内容内容内容内容内容内容内容</div></div></div>
</div>
CSS :
.box3 {// display: flex; //2列布局：第一种方法。// flex-wrap: wrap;// display: block;padding: 1rem;box-sizing: border-box;overflow: hidden;.item {float: left; //2列布局：第二种方法 注意清浮动。width: calc((100% - 2rem)/3); //两列/2三列/3 减去margin的长度 需调整nth-child的margin（自查）。margin-bottom: 2rem;box-shadow: 2px 7px 10px 0 rgba(222, 222, 222, 0.5);// margin-left: 1rem;.top {padding-bottom: calc(100%*97/172);position: relative;img{position: absolute;left:0;top:0;width: 100%;height:100%;display: block;}}.btm {position: relative;height: 8.5rem; // 当动态渲染时数据可能会有一行或者两行，img列表盒子会不等高 1.底部定高。h4 {margin-left:1rem;}.min-btm {width: calc(100% - 1rem);position: absolute; //2.定位通过btm+left来定位到底部盒子的底部。bottom: 0.2rem;left:1rem;}}}.item:nth-child(3n-1) { //选中第二列margin-left: 1rem;margin-right: 1rem;}
}
效果图：
四列以此类推，不再一一展示。有不对的地方请大家多多指教，如果有更好的布局方式，告诉我大家一起学习！
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！