请问这种样式怎么做比较好？

Question

Answer 1

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

Answer 2

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

Answer 3

这里没有用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;
    }

Answer 4

负的margin-left即可