我的div不會向左浮動

Question

我有一個問題，可能在這里被詢問過無數次。 我正在創建幻燈片，因此希望我的div並排堆疊。

這是語義結構：

<section class = "slideshow">
   <div class = "slides">
       <div class = "slideholder>
          <div id = "slide_1" class = "slide">  
          </div>
        </div>
       <div class = "slideholder >
          <div id = "slide_2" class = "slide">  
          </div>
       </div>
       <div class = "slideholder>
          <div id = "slide_3" class = "slide">  
          </div>
       </div>
   </div>
</section>

相應的CSS如下所示：

.slides{
position:relative;
margin:2% auto;
width:80%;
max-height:300px;
}

.slideshow{
position:relative;
margin:100px auto;
width:100%;
min-height:80%;
border:1px solid #ccc;
}

.slideholder{
width:100%;
min-height:300px;
position:relative;
}

.slide{
 position:absolute;
 width:100%;
 text-align:center;
}

.slide div{
 min-height:300px;
}

您可能會問，為什么div div是與slide分開設置的。 好吧，該類幻燈片內部有幾個以特定方式設置的div。 最小高度僅捕獲了其中的一個特征，其余部分與動畫有關，因此可能對這個問題的上下文沒有任何重要性。

我在.slide div和.slides div中都放置了float：left樣式。 我有些困惑，為什么它仍然像我希望的那樣垂直還是水平呈現為塊元素。 誰能教我怎么釣魚？

謝謝

Answer 1

嘗試使用絕對定位，然后將左側設置為減去任何有效值（足以使圖像不可見）

.slides {
position:absolute;
left:-400px;
}

這樣的東西