1

私は自分のサイト用に軽量のレスポンシブ jQuery スライダーを作成しており、非常に一般的なマークアップを使用しています。

HTML:

<div id="slider">
  <ul>
    <li><img class="active" src="slide1.jpg" alt=""></li>
    <li><img src="slide2.jpg" alt=""></li>
    <li><img src="slide3.jpg" alt=""></li>
  </ul>
</div>

CSS:

#slider {
  width:80%;
  max-width:800px;
  margin:0 auto;
}

#slider ul {
  margin:0px;
  padding:0px;
  list-style:none;
  width:100%;
}

#slider ul li {
  width:100%;
  position:relative;
}

#slider img {
  width:100%;
  position:absolute;
  top:0px;
  box-shadow:0px 20px 40px rgba(0,0,0,.66);
}

#slider img.active {
  z-index:1;
}

私が抱えている問題は、絶対配置されたスライドが想定どおりに機能し、ページの構造からそれらを削除していることです。(これは私が彼らにやりたいことではありませんが、それらを積み重ねる簡単な方法でした)。

私は今日、CSS Pseudo-Elements と、人々がそれらを使って行っているすべてのクールなことについて読んでいます。そして、それは私に考えさせました...これらの絶対位置要素を「明確にする」ためにそれらを使用できますか? 私の考えでは、次のようなことをする方法があるかもしれません：

#slider img:before {
  content:"";
  display:block;
  position:static;
}

これを実現するには明らかにこれらのスタイル以上のものが必要です (なぜなら、私が望むように物事をレンダリングしていないからです... この時点で、「コンテナーの高さを指定するだけで完了しないのはなぜですか?」と考えているかもしれません。スライドは、コンテナの高さが縮小したときに反応するように設計されています。

jQueryを使用してコンテナの高さを画像の高さに対して相対的に設定することなく、できるだけ多くのことをしたいと本当に思っています...魅力的ですが、それを回避する方法があると思います...

これを行う方法（または可能かどうか）については、（まだ）オンラインで何も見つかりません。CSS の達人がステップアップして、ここで私を助けてくれませんか? スライドをスタックする別の方法を聞きたいです。または、(主に)疑似要素を使用して、絶対位置の画像の周りにコンテナーの高さを保持できるかどうか...

更新:ここの jsFiddle: http://jsfiddle.net/derekmx271/Hu6Yf/

更新：これで解決策に近づきます（スライドと同じ寸法を固定する必要があるだけです）:) http://jsfiddle.net/derekmx271/T7A7M/

4

2 に答える 2

0

明確に修正するには、次の CSS を試してください。

#slider img:after {
    clear: both;
}
#slider img:before, #slider img:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    width: 0;
}
于 2013-02-20T10:19:42.570 に答える