html - 强制 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>

( Fiddle link )

调整页面大小时，我的内部 div 元素会挤压在一起并出现在彼此的顶部，即使我在两个 .carousel 上都设置了 overflow-x:hidden > 和 css 中的 html。

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

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

---

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

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

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

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

Updated Fiddle

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>