4 个回答
✓ 已被采纳

仅供参考:大盒子flex布局,包裹图片的小盒子flex-shriking:0,flex-grow:0,在加上一个margin-left:负值。

你这个头像高度固定的,简单使用绝对定位就能实现

这里没有用vue, 用vue就很方便了, v-for, 然后根据下标计算一下可以给每个头像的left赋值, 不用一个个写了

  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
    .box {
      position: relative;
    }

    .box div {
      position: absolute;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: pink;
      border: 2px #fff solid;
    }

    .box div:nth-child(2) {
      left: 75px;
    }

    .box div:nth-child(3) {
      left: 150px;
    }

image.png

负的margin-left即可

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题