强制 div 并排显示并隐藏任何溢出

Question

我正在尝试创建一个简单的轮播，它从第 1 项开始，可以滑动到最后一项（不需要是无限的项目链）。

但是，我在连续显示项目时遇到一些问题：

html {
  overflow-x: hidden;
}

.carousel {
  overflow-x: hidden;
  position: absolute;
  left: 0px;
  top: 100px;
  height: 300px;
  width: 100%;
  background: blue;
}

.carousel div {
  position: relative;
  background: yellow;
  width: 100px;
  height: 250px;
  float: left;
  border: 1px solid black;
}

<div class="carousel">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

（小提琴链接）

当调整页面大小时，我的内部 div 项目会挤压在一起并出现在彼此的顶部，即使我已在 css和overflow-x: hidden两者上进行了设置。.carouselhtml

我希望发生的是，如果调整页面大小（或者如果轮播项目沿着滑动），这些项目应该并排放置，并且只是从屏幕上溢出而看不见。

有人可以告诉我这是否可能并为我指明正确的方向吗？

---

经过更多实验后，我将overflow-x和overflow-y隐藏.carousel并设置border-box和white-space属性。

我将内部设置divs为display: inline-block和margin: auto。

现在我应该能够.carousel使用 jQuery 左右滑动，并且图像将保持在一条线上。

.carousel {
  position: absolute;
  top: 250px;
  left: 0px;
  height: 100px;
  box-sizing: border-box;
  overflow-y: hidden;
  overflow-x: hidden;
  white-space: nowrap;
  background: red;
}

.carousel div {
  background: blue;
  width: 200px;
  height: 100%;
  margin: auto;
  display: inline-block;
}

<div id="carousel" class="carousel">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

更新了小提琴

Answer 1

你可能想检查我的CSS并自己辨别。我希望它有帮助。

https://jsfiddle.net/617zpoy9/2/

<style>
  .carousel {
    height: 100px;
    box-sizing: border-box;
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
    background: red;
  }

  .carousel div {
    background:blue;
    width: 15%;
    height: 100%;
    margin: auto;
    display: inline-block;
  }
</style>
<div class="carousel">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
</div>