jquery - 如何使用水平滚动视口(viewport)制作内联 li 100% 宽度的窗口

Question

最后这将是一个简单的响应式 slider 。问题是 li 不会水平堆叠。我怎样才能保持当前窗口宽度为 100% 的 li 和溢出水平滚动而不是垂直滚动的 ul？是否可以在css中打上his only？

这是一个活体样本 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 抱歉)

    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;}

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

Answer 1

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

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

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

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

Here's a working Fiddle

我不相信有一种方法可以使用纯 CSS 并且事先不知道有多少张幻灯片来做到这一点。