我的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;
}

这样的东西