1

我正在为我的网站制作一个轻量级的响应式 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 伪元素的内容以及人们使用它们所做的所有很酷的事情。这让我想到......它们可以用来“清除”这些绝对定位的元素吗？我的想法是，可能有一种方法可以执行以下操作：

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

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

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

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

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

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

4

2 回答 2

2

有许多不同的方法可以实现滑块/轮播系统（在术语或标记、JavaScript 和 CSS 方面），如果您发现其中一种方法不太有效，那么重新考虑方法通常是个好主意。据我所知，你在问什么:before并且:after不会工作，因为一旦一个元素被绝对定位，它就会停止监听任何其他元素的影响（保存 - 在某些情况下 - 它是位置父元素）。

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

要求

如果我理解正确，您想要的是让您的“容器”假设您的 UL 中最大图像的大小，但您希望这些项目彼此堆叠。就我的 CSS 知识而言，其中一件事情必须改变，因为你不能两者都做——除非你想尝试flexbox可能提供的可能性？

问题

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

可用选项

  1. 使用正负相对定位（或边距）来保持元素的定位——这会使你的 JavaScript 开发更加困难，但意味着元素会在文档中保留它们的空间。

  2. 使用display: tableor float: left （具有足够的容器宽度）将所有元素置于一条水平线上——这将保持你的高度，但意味着你会限制你的过渡效果（除非你使用 JavaScript 将这一行元素复制到单独的层中）。

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

  4. 归根结底，由于大多数轮播系统都需要 JavaScript 才能工作，您不妨在 JS 中定义容器的尺寸（正如您提到的）并完成它。保持元素绝对定位将使您的编码工作更轻松。

  5. 查看 flexbox 并查看它是否具有堆叠元素的能力。

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

更新

关于通过contentusing添加图像:before，:after您将无法控制尺寸。您可能可以通过背景设置图像，这将允许您缩放它们（使用background-size），但我不确定这将如何让您在构建轮播时更轻松，因为您必须将这些图像 URL 硬编码到CSS 而不是使用标记...

于 2013-02-20T11:58:18.580 回答
0

对于 clearfix，试试这个 CSS：

#slider img:after {
    clear: both;
}
#slider img:before, #slider img:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    width: 0;
}
于 2013-02-20T10:19:42.570 回答