手机端列表常用的布局

手机端列表常用的布局

注意：图片实现自适应，在不同的设备上等比缩放。

左右布局

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