Question

我有一个带有产品信息的引导程序模式。在该模式上有一个附加的图像部分，该部分必须是水平可滚动的。我已经开始工作了，但是我必须发送固定的宽度。无论如何，我可以使此绝对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来做到这一点。

Answer 1

从字面上看，是在发布此问题并花了几个小时大声笑之后才发现的。

仅删除宽度：200％；并替换为min-width：max-content;

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

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

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

3 个答案: