0

In the end this is gonna be a simple responsive slider. problems being the li's wont stack horizontally. How can i maintain li's that are 100% width of the current window and ul's that overflow scrolls horizontally and not vertically? Is it possible to dot his only in css?

HERES A LIVE SAMPLE JSFIDDLES

html

 <article id="viewport">
  <ul id="slideshow">
    <li class="slide">
      <section id="towing">
        <div class="caption">
          <header>
            <h1>towing service</h1>
          </header>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et nisi quam, eget cursus augue. Sed id felis non urna tristique lacinia vel quis neque. Vivamus nisl nibh, lacinia sed egestas et, euismod mollis sem. Maecenas non orci erat, a tincidunt magna.</p>
        </div>
      </section>
    </li>
    <li class="slide">
      <section id="scraping">
        <div class="caption">
          <header>
            <h1>metal scraping service</h1>
          </header>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et nisi quam, eget cursus augue. Sed id felis non urna tristique lacinia vel quis neque. Vivamus nisl nibh, lacinia sed egestas et, euismod mollis sem. Maecenas non orci erat, a tincidunt magna.</p>
        </div>
      </section>
    </li>
    <li class="slide">
      <section>
        <div class="caption">
          <header>
            <h1>trade-in service</h1>
          </header>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et nisi quam, eget cursus augue. Sed id felis non urna tristique lacinia vel quis neque. Vivamus nisl nibh, lacinia sed egestas et, euismod mollis sem. Maecenas non orci erat, a tincidunt magna.</p>
        </div>
      </section>
    </li>
  </ul>
</article>

CSS (.less symantics sorry)

    div#service{
    position:relative;
    height:800px;
    width: 100%;
    background:pink;}

article#viewport{
    position:relative;
    height:600px;
    width:100%;
    top:100px;
    background:@yellow;
    overflow:hidden; }
ul#slideshow{
    position:relative;
    overflow:auto;
    height:100%;
    display:inline-block; }

li.slide{
    position:relative;
    height:600px;
    width: 100%;
    zoom: 1;
    display:inline-block;
    background:#ccc;
}
div.caption{width:300px; background:#555;text-align:right;float:right;}

​</p>

Ps. Why is it when I set the .captions to position absolute; it breaks this whole interaction?

4

2 に答える 2

0

私が完全に理解しているかどうかはわかりませんがwidth: 100%、＃slideshowでを見逃しているようです。これを設定すると、.captionsも。で正しく機能しposition: absoluteます。

http://jsfiddle.net/ZsuVy/1/

于 2012-06-13T20:45:22.110 に答える
0

これがあなたの「スライドショー」についてのことです-ulはデフォルトでになりますwidth: auto、それはそれがその親の幅に拡大することを意味します（それはブロック要素であるため）。高さのように、コンテンツによって幅が拡大することはありません。

したがって、必要なのはビューポートdiv（とを含むdiv width: 100%）overflow: autoです。これにより、スクロールしたり、余分なスライドを非表示にしたりできます。次に、のdivが必要です。ここwidthで、はスライドの数です。これにより、スライドに必要なすべてのスペースが水平に配置されます。(x * 100)%x

また、スライドは（切り捨て）にwidth等しい必要があります。ここでも、はスライドの数です。これは直感に反しているように見えますが、考えてみると、ウィンドウの100％倍のサイズの1分の1になります。つまり、ウィンドウの100％のサイズになります。(100 / x)%xxx

float: left;最後に、の代わりにを使用する必要がありますdisplay: inline-block。これがなぜなのか正確にはわかりませんが、それを機能させる唯一の方法です。私はちょっと嫌いなので、それは私には大丈夫ですinline-block。

これが動作するフィドルです

純粋なCSSを使用して、スライドの数を事前に知らなくても、これを行う方法はないと思います。

于 2012-06-13T21:01:15.560 に答える