当DIV内部溢出时，DIV变窄

提问者：小点点

当DIV内部溢出时，DIV变窄

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

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

有没有一种方法，我可以使父DIV更小，以匹配图像时，他们放置在一起？因为图片是24x24px，所以它们应该采取78px而不是96px的最大值（在JSbin上，它在图片之间不知为什么会有空格，所以它比它应该的宽）。

HTML

<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>

CSS

#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;
}

共2个答案

匿名用户

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

对于这种布局，您应该使用display:flex。这样，您既可以将图像放在一起（默认），也可以使用justify-content:space-between将它们自动展开。

此处显示代码

匿名用户

问题是在使用左定位，因为它可能会混乱的流动集装箱。在这里，我删除了它，并使用inline-block和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>

和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;
}