1

関連する他の投稿を読んでいますが、特定の問題の解決策が見つかりませんでした。ここにあります: jCarouselLite に基づいて、書籍を表示するスライダーを作成しました。うまくいきますが、高さに関係なく画像を一番下に配置したいと思います。つまり、現在のように、短い画像は LI の上部に配置されます。親コンテナーを position: relative に設定し、子要素を絶対に設定する必要があることはわかっています。親ボックスは「.carousel」で、子ボックスは要素 LI 内に含まれる画像だと思います。いくつかのオプションを試してみましたが、役に立ちませんでした。どんな助けでも大歓迎です。

    .slider {
    float: left;
    margin-left: 3em;
}
.carousel {
    float: left;
    width: 68.75%; /*72.916666667%;*/
    background: #CCCCCC;
    height: 210px!important;
    position: relative; /* DOES NOT WORK */
}
.carousel ul li{
    display: table-cell;
    padding-right: 0.75em;
}
.carousel ul li img{
    -webkit-box-shadow: 7px 0px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         7px 0px 5px rgba(50, 50, 50, 0.75);
        position: absolute; /* DOES NOT WORK */
bottom: 0;      /* DOES NOT WORK */
}
-----HTML-----
<div class="slider">
    <div class="carousel">
          <ul>
              <li><a href="#"><img src="../static/images/getcover_002.jpe" title="#titulo_libro"  alt="1"></a></li>
              <li><a href="#"><img src="../static/images/getcover_small.jpe" title="#titulo_libro"  alt="2"></a></li>
              <li><a href="#"><img src="../static/images/getcover_005.jpe" title="#titulo_libro"  alt="3"></a></li>
              <li><a href="#"><img src="../static/images/getcover_006.jpe" title="#titulo_libro"  alt="3"></a></li>
              <li><a href="#"><img src="../static/images/getcover_007.jpe" title="#titulo_libro"  alt="3"></a></li>
              <li><a href="#"><img src="../static/images/getcover_008.jpe" title="#titulo_libro"  alt="3"></a></li>
              <li><a href="#"><img src="../static/images/getcover_010.jpe" title="#titulo_libro"  alt="3"></a></li>
              <li><a href="#"><img src="../static/images/getcover_011.jpe" title="#titulo_libro"  alt="3"></a></li>
          </ul>
      </div>
</div>
4

2 に答える 2

1

何を達成しようとしているのかは完全にはわかりませんが、リスト要素を相対的にし、画像を絶対的に作成した場合(現在行っているように)、画像を下に揃えることができます。

あなたの例を少し更新し、リスト要素に境界線、幅、高さを与えて、それらが一番​​下にあるのを見ることができるようにしました。

ul li{
   position: relative;
}

http://jsfiddle.net/jaap/x79H4/

于 2013-10-10T16:24:20.077 に答える