jquery - 是否可以使用伪元素使包含元素环绕绝对定位元素(如 clearfix)？

Question

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

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 伪元素以及人们用它们做的所有很酷的事情。这让我想到......它们可以用来“clearfix”这些绝对定位的元素吗？我的想法是，可能有一种方法可以执行以下操作:

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

要实现这一点显然需要的不仅仅是那些样式(因为它没有按照我想要的方式呈现东西......我知道此时你可能会想“为什么不只指定容器的高度并完成它？”。好吧，幻灯片应该在收缩时做出响应，容器的高度也会收缩。

我真的想尽可能多地做这件事，而不是求助于 jQuery 来设置容器相对于图像高度的高度……这很诱人，但我认为有办法解决这个问题……

我(目前)在网上找不到任何有关如何执行此操作(或是否可能)的信息。一些 CSS 大师可以站出来帮助我吗？我很想听听其他方法来堆叠我的幻灯片，或者(主要是)是否可以使用伪元素来保持绝对定位图像周围的容器高度...

更新: jsFiddle 在这里:http://jsfiddle.net/derekmx271/Hu6Yf/

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

Answer 1

有许多不同的方法可以实现 slider /旋转木马系统(在标记、JavaScript 和 CSS 方面)，如果您发现一种方法不太有效，重新考虑方法通常是个好主意。据我所知，你在用 :before 和 :after 询问什么是行不通的，因为一旦一个元素被绝对定位，它就会停止监听任何其他元素的影响(保存——在某些情况下——它是位置 parent )。

正是出于上述原因，我一直希望有一种新的显示模式，例如display: stack 之类的..但是，唉，还没有:)

要求

如果我没理解错的话，您想要的是您的“容器”采用 UL 中最大图像的大小，但您希望这些元素彼此堆叠。就我的 CSS 知识而言，其中一件事情必须改变，因为你不能两者都做——除非你想尝试 flexbox 的可能性。可以给吗？

问题

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

可用选项

1. 使用正向和负向相对定位(或边距)让您的元素保持定位——这会使您的 JavaScript 开发更加困难，但这意味着元素在文档中保持它们的空间。

2. 使用 display: table 或 float: left (具有足够的容器宽度) 将所有元素放在一条水平线上— 这将保持您的高度，但意味着您将限制您的过渡(除非您使用 JavaScript 将这一行元素复制到单独的层中)。

3. 您的 JS 可以隐藏原始图像(使用 visibility: hidden，因为这意味着该元素仍然占用空间)，然后仅使用克隆的绝对定位图像。通过摆弄隐藏图像的 css 布局，您仍然可以保留这些“重影”元素生成的最大高度。

4. 归根结底，由于大多数轮播系统都需要 JavaScript 才能工作，因此您最好在 JS 中定义容器的尺寸(如您所述)并完成它。保持元素绝对定位将使您的编码工作更轻松。

5. 研究 flexbox，看看它是否具有堆叠元素的能力。

6. 也许可以使用 CSS 变换来堆叠元素，但我的经验表明，在视觉上您可能会得到想要的东西，但变换后的元素通常会在文档的其他地方留下“幻影”空间。

更新

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