Question

我正在为我的网站制作一个轻量级的响应式jQuery滑块，并使用了非常常见的标记：

HTML：

<div id="slider">
  <ul>
    <li><img class="active" src="slide1.jpg" alt=""></li>
    <li><img src="slide2.jpg" alt=""></li>
    <li><img src="slide3.jpg" alt=""></li>
  </ul>
</div>

CSS：

#slider {
  width:80%;
  max-width:800px;
  margin:0 auto;
}

#slider ul {
  margin:0px;
  padding:0px;
  list-style:none;
  width:100%;
}

#slider ul li {
  width:100%;
  position:relative;
}

#slider img {
  width:100%;
  position:absolute;
  top:0px;
  box-shadow:0px 20px 40px rgba(0,0,0,.66);
}

#slider img.active {
  z-index:1;
}

我遇到的问题是我的绝对定位幻灯片正在做他们应该做的事情，并从页面结构中删除它们。（这不是我希望他们做的，但这是叠加它们的简单方法。）

我今天一直在阅读关于CSS Pseudo-Elements以及人们正在使用它们的所有很酷的东西。它让我觉得......他们可以用来“清除”这些绝对定位的元素吗？我的想法是，可能有办法做以下事情：

#slider img:before {
  content:"";
  display:block;
  position:static;
}

显然需要更多的样式来实现这一点（因为它不会渲染我想要的东西......我知道你可能会想到“为什么不指定容器的高度并完成它？“。好吧，幻灯片的响应意味着当它们收缩时，容器的高度也会缩小。

我真的想尽可能多地做这个，而不是诉诸jQuery来设置相对于图像高度的容器高度......这很诱人，但我认为有办法实现......

我在网上找不到任何关于如何做到这一点（或者如果可能的话）。一些CSS大师可以加强帮助我吗？我很乐意听到堆叠我的幻灯片的其他方法，或者（主要）是否可以使用伪元素来保留容器高度围绕我绝对定位的图像......

更新： jsFiddle：http://jsfiddle.net/derekmx271/Hu6Yf/

更新：接近解决方案（只需要锁定与幻灯片相同的尺寸）:) http://jsfiddle.net/derekmx271/T7A7M/

Answer 1

有许多不同的方法可以实现滑块/轮播系统（术语或标记，JavaScript和CSS），如果你发现一种方法不太有用，重新思考方法通常是一个好主意。据我所知，:before和:after无法正常工作，因为只要一个元素绝对定位，它就会停止听取任何其他元素的影响（在某些情况下保存 - 它是位置父母。）

由于上述原因，我一直希望有一种新的显示模式，例如display: stack或其他......但是，唉，还没有：）

要求

如果我理解正确，您想要的是“容器”假定您的UL中最大图像的大小，但您希望这些项目相互叠加。就我的CSS知识而言，其中一个必须改变，因为你不能同时做到 - 除非你想试验flexbox可能给出的可能性？

问题

我知道（在flexbox之外）堆叠元素的唯一方法是使用position: absolute，并且只要在元素上使用绝对定位，在计算父元素的尺寸时就不再考虑该元素。您可以使用position: relative，但这通常需要手动/代码干预来指定确切的位置。

可用选项

使用正负相对定位（或边距）保持元素定位 - 这会使您的JavaScript开发更加困难，但这意味着元素会在文档中保留其空间。
使用display: table或float: left （有足够的容器宽度）将所有元素放入水平线 - 这将保持您的身高，但意味着你限制您的转换可以（除非您使用JavaScript将此行元素复制到单独的图层中）。
您的JS可能会隐藏原始图像（使用visibility: hidden，因为这意味着元素仍占用空间），然后只能使用克隆的绝对定位图像。通过摆弄隐藏图像的css布局，您仍然可以保留这些“幻影”元素生成的最大高度。
在一天结束时，由于大多数轮播系统都需要使用JavaScript，因此您也可以在JS中定义容器的尺寸（如您所述）并完成它。保持元素绝对定位将使您的编码工作更轻松。
查看flexbox并查看它是否具有堆叠元素的能力。
有可能使用CSS转换来堆叠元素，但是我对此的体验意味着您可能会得到您想要的内容，但转换后的元素通常会在文档的其他位置占据“幻影”空间。 / p>

更新

关于使用content和:before通过:after添加图片，您将无法控制尺寸。您可以通过背景设置图像，这样可以缩放它们（使用background-size），但我不确定这会如何在构建旋转木马时让您的生活更轻松，因为您需要进行硬编码将这些图像URL放入CSS而不是使用标记...

Answer 2

对于clearfix，请尝试此CSS：

#slider img:after {
    clear: both;
}
#slider img:before, #slider img:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    width: 0;
}

是否可以使用伪元素使包含元素环绕一个绝对定位的元素（如clearfix）？

2 个答案:

要求

问题

可用选项

更新