如何在小於浮動元素的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。您可以嘗試在浮動框周圍添加固定寬度的寬容器，以便它們與狹窄的容器分開佈置。