Question

我有一个问题，可能已经在这里被问了好几十次。我正在创建幻灯片，因此希望我的divs并排堆叠。

这是语义结构：

<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。最小高度仅捕获其中的一个特征，其余部分是动画，因此可能对此问题的上下文不重要。

我将float：left样式放在.slide div和.slides div中。我有点困惑为什么它仍然作为块元素垂直渲染而不是水平，因为我想要它们。谁能教我如何钓鱼？

感谢

Answer 1

尝试使用绝对定位并将左侧设置为负值（足以使图像看不见）

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

类似的东西

我的div不向左浮动

1 个答案: