手机端列表常用的布局
注意:图片实现自适应,在不同的设备上等比缩放。
左右布局
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