Html 内部DIV溢出时的较窄DIV

我制作了一个DIVs溢出（DIV大小的1/4）来产生一个好的效果并获得一点空间。 但是，当两个DIV相邻时，父DIV的宽度仍然相同

当我试图使父DIV变小时，最后一张图片被移到第二行

有没有一种方法可以使父DIV变小，以便在图像彼此放置时匹配它们？ 由于图片是24x24px，它们的最大拍摄速度应该是78px，而不是96px（在JSbin上，它在图像之间有一些空白，所以它比应该的宽度要宽）

代码

#img容器{
显示：内联块；
浮动：左；
保证金：px自动0px自动；
线高：正常；
宽度：108px；
边框：1px纯黑；
高度：24px；
}
.img{
位置：相对位置；
显示：内联块；
溢出：可见；
边界半径：50%；
高度：24px；
宽度：24px；
边界：无；
}

---

问题在于，当您使用例如

left:-8px

移动元素时，它会相对于元素所在的位置移动元素，但容器的行为就像元素处于其原始位置一样-因此，如果容器太窄，您仍然会得到回流

对于这种布局，您应该使用

display:flex

。这样，您既可以将图像放在一起（默认设置），也可以使用

justify content:space-between

自动展开图像

---

问题是，当您使用例如

left:-8px

移动元素时，它会相对于元素所在的位置移动元素，但容器的行为就像元素处于其原始位置一样-因此，如果容器太窄，您仍然会得到回流

对于这种布局，您应该使用

display:flex

。这样，您既可以将图像放在一起（默认设置），也可以使用

justify content:space-between

自动展开图像

---

问题在于使用左边的位置，因为它会扰乱容器的流动。在这里，我删除了它，并使用

inline flex

和

justify content:center

代替

inline block

以下是HTML：

<div id="assignee-img-container">
   <div class="assignee-img" style="z-index: 10;">
     <img src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
   <div class="assignee-img" style="z-index: 11;">
     <img src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
   <div class="assignee-img" style="z-index: 12;">
     <img src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
   <div class="assignee-img" style="z-index: 13;">
     <img src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
</div><div id="assignee-img-container">
   <div class="assignee-img" style="z-index: 10;">
     <img src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
   <div class="assignee-img" style="z-index: 11;">
     <img src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
   <div class="assignee-img" style="z-index: 12;">
     <img  src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
   <div class="assignee-img" style="z-index: 13;">
     <img src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
</div>

---

问题在于使用剩余的空间进行定位，因为它会扰乱容器的流动。在这里，我删除了它，并使用

inline flex

和

justify content:center

代替

inline block

以下是HTML：

<div id="assignee-img-container">
   <div class="assignee-img" style="z-index: 10;">
     <img src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
   <div class="assignee-img" style="z-index: 11;">
     <img src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
   <div class="assignee-img" style="z-index: 12;">
     <img src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
   <div class="assignee-img" style="z-index: 13;">
     <img src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
</div><div id="assignee-img-container">
   <div class="assignee-img" style="z-index: 10;">
     <img src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
   <div class="assignee-img" style="z-index: 11;">
     <img src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
   <div class="assignee-img" style="z-index: 12;">
     <img  src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
   <div class="assignee-img" style="z-index: 13;">
     <img src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
</div>

---

使用左边距而不是左边距使用左边距而不是左边距