如何在小于浮动元素的div中浮动元素？

Question

我想为自己的学习目的建立自己的旋转木马。但我很好奇如何正确地做到这一点。我试图把div作为旋转木马物品相互放在一起，用float：left。每个div都有固定的宽度和高度。

之后，我在转盘项目周围放了一个div，叫做“裁剪”。裁剪div的大小与其中应该一次移动的元素大小相同（如果通过单击“下一个”移动3个元素，裁剪div的宽度等于这3个元素的宽度）。我已经在几个例子中看到了这一点。此裁剪格也会溢出：隐藏以隐藏下一个和上一个轮播物品。

问题是，应该通过剪辑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。您可以尝试在浮动框周围添加固定宽度的宽容器，以便它们与狭窄的容器分开布置。