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 はその 1 つの機能のみをキャプチャします。残りはアニメーションを使用するため、この質問のコンテキストにはおそらく重要性がありません。

float:left スタイルを .slide div と .slides div に入れました。代わりに、水平方向ではなく垂直方向のブロック要素としてレンダリングする理由が少し混乱しています。釣り方を教えてくれる人はいますか？

ありがとう

4

1 に答える 1

1

絶対配置を使用してみて、左をマイナスに設定してください (画像が見えなくなるのに十分です)。

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

そんな感じ

于 2012-11-07T23:33:33.790 に答える