0

我有一个问题可能在这里被问了无数次。我正在创建一个幻灯片，因此希望我的 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。min-height 仅捕获其中一个特征，其余的是动画，因此可能对这个问题的上下文没有任何重要性。

我将 float:left 样式放在 .slide div 和 .slides div 中。我有点困惑，为什么它仍然垂直渲染为块元素，而不是像我希望的那样水平渲染。谁能教我钓鱼？

谢谢

4

1 回答 1

1

尝试使用绝对定位并将左侧设置为减去任何有效（足以使图像消失）

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

类似的东西

于 2012-11-07T23:33:33.790 回答