重叠/叠加多个内联图像

但显然，我需要一个递增的left值，以及z-index化身img数量的递减。当然，我可以使用@for指令来执行此操作，但事实是，有大量的头像img。我当时在看length()函数，但是它不能像我打算的那样使用。

另一个想法是设置一个固定的div宽度，并适合其中的图像，但这有其自身的问题（如果有5张图像或20张图像，如何控制宽度）。我还可以在其他地方按需要合并图像，而不使用任何CSS。

您可以使用弹性和反向顺序，然后不需要z-index：

.avatars {
  display: inline-flex;
  flex-direction: row-reverse;
  padding-left:50px;
}

.avatar {
  margin-left: -25px;
  position: relative;
  border:1px solid #fff;
  border-radius: 50%;
  overflow:hidden;
  width:50px;
  height:50px;
}

.avatar img {
  width:50px;
  height:50px;
}

  
        
    
  
        
    
  
        
    
  
       
    
  

4 People