当内部 DIVs 溢出时变窄 DIV

Question

我制作了一个 DIVs 溢出（DIV 大小的 1/4）以产生不错的效果并获得一点 space。但是，当 DIV 彼此相邻时，父 DIV 的宽度仍然相同。

当我尝试缩小父级 DIV 时，最后一张图片移到了第二行。

有什么方法可以让父 DIV 变小，以便在图像彼此重叠时匹配图像？由于图片是 24x24 像素，它们应该最大为 78 像素而不是 96 像素（在 JSbin 上它不知何故在图像之间有空白 spaces，所以它比它应该的更宽）。

代码

#assignee-img-container {
  display: inline-block;
  float: left;
  margin: px auto 0px auto;
  line-height: normal;
  width: 108px;
  border: 1px solid black;
  height: 24px;
}

.assignee-img {
  position: relative;
  display: inline-block;
  overflow: visible;
  border-radius: 50%;
  height: 24px;
  width: 24px;
  border: none;
}

<div id="assignee-img-container">
  <div class="assignee-img" style="z-index: 10; left: 0px;">
    <img src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
  <div class="assignee-img" style="z-index: 11; left: -8px;">
    <img src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
  <div class="assignee-img" style="z-index: 12; left: -16px;">
    <img src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
  <div class="assignee-img" style="z-index: 13; left: -24px;">
    <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; left: 0px;">
    <img src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
  <div class="assignee-img" style="z-index: 11; left: 0px;">
    <img src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
  <div class="assignee-img" style="z-index: 12; left: 0px;">
    <img  src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
  <div class="assignee-img" style="z-index: 13; left: 0px;">
    <img src="https://static.neris-assets.com/images/test-header-3.svg">
  </div>
</div>

Answer 1

问题是当你使用例如left: -8px 要移动您的元素，它会相对于它所在的位置移动元素，但容器的行为就像元素处于其原始位置一样 - 因此如果容器太窄，您仍然会得到重排。

对于这种布局，您应该看起来像是在使用 display:flex。这样您就可以将图像放在一起（默认）或使用 justify-content:space-between.

自动将它们展开

Codepen here

Answer 2

问题在于使用 left 进行定位，因为它会扰乱容器的流动。在这里我删除了它，而不是 inline-block 使用 inline-flex 和 justify-content: center.

这里是 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>

和CSS：

#assignee-img-container {
    display: inline-flex;
    margin: px auto 0px auto;
    line-height: normal;
    width: 108px;
    border: 1px solid black;
    height: 24px;
}

.assignee-img {
    position: relative;
    display: inline-flex;
    justify-content: center;
    overflow: visible;
    border-radius: 50%;
    height: 24px;
    width: 24px;
    border: none;
}

当内部 DIVs 溢出时变窄 DIV

Narrower DIV when inside DIVs overflow

html

css

overflow