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

调整页面大小时，即使我在 .carousel 和 [=16] 上都设置了 overflow-x: hidden，但我内部的 div 项会挤在一起并出现在彼此之上=] 在 css.

我希望发生的情况是，如果调整页面大小（或者如果旋转木马项滑动），这些项应该并排放置，只是溢出屏幕看不见。

有人可以告诉我这是否可行并指出正确的方向吗？

经过更多实验，我将 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>

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>

Answer 2

您可以尝试一些 javascript 代码来定义“.carousel”的宽度，但是您可以试试这个...

html {
    overflow-x: hidden;
}

.carousel {
    overflow-x: hidden;
    position: absolute;
    left:  0px;
    top: 10px;
    width: 10000px;
    background: blue;
}

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

Answer 3

另一个解决方案是将 div 的宽度设置为不同于 100%：

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

像这样：

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

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

Force divs to display side by side and hide any overflow

html

css

overflow

carousel