Question

我想为学习目的建立自己的旋转木马。但我很好奇如何正确地做到这一点。我尝试将div作为旋转木马物品放在彼此旁边，浮动：左。每个div都有固定的宽度和高度。

在那之后，我在旋转木马项目周围放了一个div，称为“剪辑”。裁剪div与其中应该一次移动的元素具有相同的大小（如果通过单击“next”移动3个元素，则裁剪div的宽度等于这3个元素的宽度）。我在几个例子中看到了这一点。此剪辑div也会溢出：隐藏以隐藏下一个和上一个轮播项目。

问题是应该通过剪辑div隐藏的元素被放在一个新行上，这使整个事物无法使用。

如何解决此问题？

如果问题不够明确，请告诉我，我会尝试重写它。

Answer 1

你可以这样做：

<div id="a">
  <div id="b">
     <div id="1"></div>
     <div id="2"></div>
     <div id="3"></div>
  </div>
</div>

“a”具有固定宽度。这就像所有东西的包装，溢出设置为隐藏等等。

“b”的固定宽度很多。它是内容div（1,2,3）的包装器，因此它们不会被推到下一行。

1,2,3就像你正在做的那样向左浮动。

Answer 2

“水平滚动轮播”效果通常通过在具有overflow:hidden的固定宽度窄容器内具有固定宽度的宽对象来完成。你可以尝试在浮动盒子周围添加一个固定宽度的宽容器，这样它们就可以独立于狭窄的容器布置。