使用水平滚动使绝对定位的 div 适合内容宽度并溢出父级答案

【问题标题】：Make absolute positioned div fit content width and overflow parent with horizontal scroll使用水平滚动使绝对定位的 div 适合内容宽度并溢出父级
【发布时间】：2018-10-29 14:12:52
【问题描述】：

我有一个带有产品信息的引导模式。在该模式上是一个额外的图像部分，需要水平滚动。我已经让它工作了，但我必须发送一个固定的宽度。无论如何我可以使这个绝对 div 适合内容宽度而不会将图像放到新行吗？

<div class="additional-images-container">
  <div>
    <img width="100px" height="100px" src="">
    <img width="100px" height="100px" src="">
    <img width="100px" height="100px" src="">
    <img width="100px" height="100px" src="">
    <img width="100px" height="100px" src="">
    <img width="100px" height="100px" src="">
    <img width="100px" height="100px" src="">
    <img width="100px" height="100px" src="">
  </div>
</div>

.additional-images-container {
    height: 120px;
    overflow-x: scroll;
    position: relative;
}

.additional-images-container div {
    position: absolute;
    width: 200%;
}

再次，我需要子 div 自动调整其宽度并用水平滚动条溢出父级（在需要时）。顺便说一句，我不能使用 jQuery 来做到这一点。

【问题讨论】：

标签： html css

【解决方案1】：

在发布此问题并花费数小时后，从字面上理解它。哈哈。

刚刚去掉宽度：200%；并替换为 min-width: max-content;

【讨论】：

【解决方案2】：

在父 div 中使用 white-space: nowrap;。和 display: inline-block; 子 div 用于图像。

.additional-images-container {
    height: 120px;
    overflow-x: scroll;
    position: relative;    
    white-space: nowrap;
}


.additional-images-container div {
    display: inline-block;
}

<div class="additional-images-container">
  <div>
    <img width="100px" height="100px" src="">
    <img width="100px" height="100px" src="">
    <img width="100px" height="100px" src="">
    <img width="100px" height="100px" src="">
    <img width="100px" height="100px" src="">
    <img width="100px" height="100px" src="">
    <img width="100px" height="100px" src="">
    <img width="100px" height="100px" src="">
  </div>
</div>

【讨论】：

【解决方案3】：

这里的问题是你不能使用position: absolute;和white-space: nowrap;

可以通过在其间添加另一个包装器 (.additional-wrapper) 来解决此问题。此包装器将具有属性white-space: nowrap;

还请注意，我为您的图像创建了一个类。

.additional-images-container {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
}

.additional-wrapper {
  white-space: nowrap;
}

.images {
  height: 100px;
  width: 100px;
}

<div class="additional-images-container">
  <div class="additional-wrapper">
    <img class="images" src="">
    <img class="images" src="">
    <img class="images" src="">
    <img class="images" src="">
    <img class="images" src="">
    <img class="images" src="">
    <img class="images" src="">
    <img class="images" src="">
    <img class="images" src="">
    <img class="images" src="">
    <img class="images" src="">
    <img class="images" src="">
    <img class="images" src="">
  </div>
</div>

【讨论】：