0

最后，这将是一个简单的响应式滑块。问题是 li 不会水平堆叠。我如何保持当前窗口宽度为 100% 的 li 和溢出的 ul 水平滚动而不是垂直滚动？是否有可能只在css中加点他的？

这是一个活生生的 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 语义对不起）

    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>

附言。为什么当我将 .captions 设置为绝对位置时；它打破了整个互动？

4

2 回答 2

0

不确定我是否完全理解，但您似乎只是错过width: 100%了#slideshow 上的内容。一旦设置好，您的 .captions 也可以与 .captions 一起正常工作position: absolute。

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

于 2012-06-13T20:45:22.110 回答
0

这是关于您的“幻灯片”的事情 -ul将默认为width: auto，这意味着它会扩展到其父级的宽度（因为它是一个块元素）。它不会随其内容扩展其宽度，就像它会随其高度一样。

因此，您需要的是一个视口 div - 一个带有width: 100%和的 div overflow: auto。这将允许滚动和隐藏额外的幻灯片。然后，您需要一个 div ，其中是您拥有width的幻灯片数量。这将允许水平放置幻灯片所需的所有空间。(x * 100)%x

此外，您的幻灯片需要width等于(100 / x)%（向下舍入），其中x再次是您拥有的幻灯片数量。这似乎违反直觉，但是如果您考虑一下，它们将成为窗口大小乘以 100% 的 1x分x之一——这意味着它们将是窗口大小的 100%。

最后，您需要使用float: left;而不是display: inline-block. 我不确定这是为什么，但这是我让它工作的唯一方法。这对我来说没关系，因为我有点讨厌inline-block。

这是一个工作小提琴

我不相信有办法用纯 CSS 来做到这一点，而且事先不知道有多少幻灯片。

于 2012-06-13T21:01:15.560 回答