div定位：绝对，相对等

Question

我有纯CSS图像滑块，我希望它位于（margin:auto）下面有文字。滑块图像在堆叠时绝对定位。我无法弄清楚如何围绕这一切定位div。我有相对位置的内容和包装div。图像大小应该是响应的（因此max-width:100%），但包装或内容div可以是精确的大小。或者也许他们不需要？

这就是我所追求的：

这就是我目前管理的内容：www.jsfiddle.net/1qxxnxbf/1/

Answer 1

如果您的图片滑块是旋转木马，则无法在没有js的情况下使其响应。如果您在滑块中为滑块指定高度，则可以在js中调整它以使其具有响应性。

你唯一能做的就是保持宽高比。所以在你的例子中你有350x220的图像。因此，如果您的padding-bottom课程.slider达到62.857％（大约220/350），您将根据宽度获得可变高度。如果宽度增大/缩小，高度也会增大/缩小。

http://jsfiddle.net/1qxxnxbf/2/

编辑：我刚注意到滑块周围的代码都没有响应。你为什么试图使滑块响应？

Answer 2

查看此设计

https://jsfiddle.net/jalayoza/zvy87dcv/9/

HTML代码

<div class="content">content

  <div class="wrapper">wrapper

    <div class="slider">
      <img src="https://placeimg.com/350/220/any" class="slide" alt="slide1">
      <img src="https://placeimg.com/350/220/nature" class="slide" alt="slide2">
      <img src="https://placeimg.com/350/220/abstract" class="slide" alt="slide3">
    </div>

    <!-- text should go underneath the image -->
    <div class="text">
      <div class="text_left">
        left text
      </div>
      <div class="text_right">
        right text
      </div>
    </div>

  </div>

</div>

CSS代码

.content {
  width: 500px;
  background: #fff;
  margin: auto;
}

.wrapper {
  max-width: 400px;
  position: relative;
  background: purple;
  margin: auto;
  padding:10px;
}

.slider {
  margin: auto;
  left: 0;
  right: 0;
  max-width: 100%;
  position: relative;
  padding-bottom: 62.857%;
}

.slide {
  max-width: 400px;
  margin: auto;
  position: absolute;
  opacity: 0.5;
  width: 100%;
}

.text {
  max-width: 100%;
  position: absolute;
  background: transperant;
  opacity: 0.9;
  bottom:10px;
  width: 95%;
}

.text_left {
  max-width: 50%;
  background: #fff;
  float: left;
  text-align: left;
  padding:5px;
}

.text_right {
  max-width: 50%;
  background: #fff;
  float: right;
  text-align: right;
    padding:5px;
}

希望你会喜欢这个设计