javascript - 如何在比 float 元素小的 div 中 float 元素？

Question

出于学习目的，我想构建自己的轮播。但我很好奇如何正确地做到这一点。我尝试将 div 作为轮播元素与 float:left 并排放置。每个 div 都有固定的宽度和高度。

之后，我在轮播元素周围放置了一个 div，称为“剪辑”。裁剪 div 与其中应一次移动的元素的大小相同(如果您通过单击“下一步”移动 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 就像你做的那样向左浮动。