Question

最后，这将是一个简单的响应滑块。李的问题不会横向叠加。我怎样才能保持当前窗口100％宽度的li和溢出水平而非垂直滚动的ul？是否有可能只在css中点缀他？

HERES A LAMPLE 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抱歉）

    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

不确定我是否完全理解，但似乎你错过了#slideshow上的width: 100%。设置完成后，您的.captions也可以与position: absolute一起正常使用。

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

Answer 2

以下是关于“幻灯片”的内容 - ul将默认为width: auto，这意味着它会扩展到其父级的宽度（因为它是一个块元素）。它的宽度不会随着内容的增加而扩大。

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

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

最后，您需要使用float: left;代替display: inline-block。我不确定为什么会这样，但这是我能让它发挥作用的唯一方法。我没关系，因为我讨厌inline-block。

Here's a working Fiddle

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

如何使用水平滚动视口制作内嵌li 100％宽度的窗口

2 个答案: