是否可以使用伪元素使得元素包围绝对定位的元素（如clearfix）？ [英] Is it possible to use pseudo-elements to make containing elements wrap around an absolutely-positioned element (like a clearfix)?

问题描述

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

I am making a lightweight responsive jQuery slider for my site, and am using the very common markup:

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

我遇到的问题是我绝对定位的幻灯片正在做什么应该和从页面的结构中删除他们自己。 （这不是我想让他们做的，但它是很容易的方式来堆叠它们）。

The problem I am having is that my absolute positioned slides are doing what they are supposed to and removing them self from the structure of the page. (This is not what I want them to do, but it was the easy way to stack them).

我今天一直在阅读关于CSS伪元素，很酷的东西，人们正在与他们做。它让我想起...他们可以习惯清除这些绝对定位的元素吗？我的想法是，可能有办法做如下：

I have been reading about CSS Pseudo-Elements today and all the cool stuff people are doing with them. And it made me think... Could they be used to "clearfix" these absolute-positioned elements? My thought was that there might be a way to do something like the following:

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

显然这将超过这些样式，我不知道为什么不只是指定容器的高度并用它来完成？。这些幻灯片的意思是响应式当它们收缩时，容器的高度也是如此。

It will obviously take more than those styles to make this happen (because it isn't rendering things how I want it to... I know by this point you may be thinking "Why not just specify the height of the container and be done with it?". Well, the slides are meant to be responsive in that when they shrink, so does the height of the container.

我真的想做尽可能多的事情，而不诉诸jQuery来设置容器的高度相对于

I really want to do as much of this as possible without resorting to jQuery to set the container's height relative to the image height... It's tempting, but I think there's ways around that...

我在网上找不到任何有关如何做到这一点的信息如果可能的话）。一些CSS gurus可以加强并帮助我在这里吗？我很想听到替代的方式来堆叠我的幻灯片，或者（主要）如果可以使用伪元素来保留容器高度我的绝对定位图片...

I can't find anything online (yet) on how to do this (or if it is possible). Can some CSS gurus step up and help me out here? I would love to hear alternative ways to stack my slides, or (mainly) if it is possible to use the pseudo-elements to retain the container height around my absolutely-positioned images...

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

Update: jsFiddle here: http://jsfiddle.net/derekmx271/Hu6Yf/

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

Update: Getting close to a solution with this (just need to lock down the same dimensions as the slides) :) http://jsfiddle.net/derekmx271/T7A7M/

推荐答案

有很多不同的方法来实现滑块/术语或标记，JavaScript和CSS），如果你发现一种方法不是很有效，通常是一个好主意，重新思考方法。据我所知，你在：和之前：后不会工作，因为一旦一个元素是绝对定位的，它停止监听任何其他元素的影响（保存—在某些情况下，它是位置父级）。

There are many different ways to achieve a slider/carousel system (in terms or Markup, JavaScript and CSS), if you are finding one way isn't quite working, it is normally a good idea to rethink approach. As far as I'm aware what you are asking with :before and :after wont work, because as soon as an element is absolutely positioned it stops listening to any other element's influence (save—in some situations—it's positional parent).

这是因为上述原因希望新的显示模式例如 display：stack 或某些..但唉，还没有：）

It's for the above reason that I've been hoping for a new display mode e.g. display: stack or something.. but alas, nothing yet :)

如果我理解正确，你想要的是你的容器假设你的UL中最大的图像的大小，但你想要这些项目被堆叠在彼此之上。就我的CSS知识来说，这些事情中的一个必须改变，因为你不能做两个—除非您想要尝试 Flexbox 可能提供的功能？

If I'm understanding correctly, what you want is for your "container" to assume the size of the largest image in your UL, but you want these items to be stacked on top of each other. As far as my CSS knowledge goes, one of these things has to change, as you can't do both — unless you want to experiment with the possibilities that flexbox might give?

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

The only way I know of (outside of flexbox) to stack elements is to use position: absolute and as soon as you use absolute positioning on an element, that element is no longer taken into account when calculating it's parent's dimensions. You can use position: relative but this usually requires manual/code intervention to specify exact positions.

1. 使用正负相对定位（或边距）

1. Keep you elements positioned using positive and negative relative positioning (or margins) — this makes your JavaScript development harder, but would mean the elements keep their space in the document.

使用 display：table 或 float：left （具有足够的容器宽度）将所有元素放入水平线这将保持你的高度，但将意味着你限制你的转换可以（除非你使用JavaScript复制这行元素到不同的图层）。

Use display: table or float: left (with enough container width) to bring all your elements into a horizontal line — this will keep your height but will mean you limit what your transitions can be (unless you use JavaScript to duplicate this row of elements into separate layers).

您的JS可以保留原始图像隐藏（使用 visibility：hidden ，因为这意味着该元素仍然占用空间），然后只能使用克隆绝对定位图片。通过处理隐藏图像的css布局，您仍然可以保留这些重影元素产生的最大高度。

Your JS could leave the original images hidden (using visibility: hidden as this means the element still takes up space) and then only work with cloned absolutely positioned images. By fiddling with your hidden image's css layout you could still preserve the maximum height generated by these 'ghosted' elements.

旋转木马系统需要JavaScript才能正常工作，您可能只需在JS中定义容器的尺寸（正如您所提到的那样），并完成它。

At the end of the day, as most carousel systems require JavaScript to work, you might as well just define the container's dimensions in JS (as you mention) and have done with it. Keeping your elements absolutely positioned will make your coding job easier.

查看flexbox，看看它是否能够堆叠元素。

Look into flexbox and see if it has the ability to stack elements.

可以使用CSS变换来堆叠元素，但是我的经验意味着你可能会得到你想要的，但是变换的元素经常留下ghosted空间

It may be possible to stack elements using CSS transforms, however my experience of this has meant visually you might get what you want, but transformed elements quite often leave 'ghosted' space taken up elsewhere in the document.

更新

使用：之前和：之后添加图像您将无法控制尺寸。你可以通过背景设置图像，这将允许你缩放它们（使用 background-size ），但我不知道这将如何使你的生活更容易建立一个轮播，因为你必须硬编码这些图像URL到CSS，而不是使用标记...

update

With regard to adding images via content using :before and :after you won't be able to control the dimensions. You could probably set the image via a background instead, which would allow you to scale them (using background-size), but I'm not sure how this would make your life easier when building a carousel as you would have to hardcode these image URLs into the CSS rather than using the markup...

这篇关于是否可以使用伪元素使得元素包围绝对定位的元素（如clearfix）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！