div定位：绝对，相对等

Question

I have pure CSS image slider which I want to have positioned ( margin:auto ) with text underneath. Slider images are absolutely positioned as they are stacked. I can't figure out how to position divs around it all. I have content and wrapper divs with relative position. Image size should be responsive (therefore max-width:100% ) but wrapper or content divs can be exact size. Or maybe they don't need to either?

This is what I am after:

And this is what I managed so far: www.jsfiddle.net/1qxxnxbf/1/

Answer 1

If your image slider is a carousel, you can't make it responsive without js. If you give your slider a height in the css, you can adjust it in the js to make it responsive.

The only other thing you can do is maintain an aspect ratio. So in your example you have 350x220 images. so If you get your padding-bottom on your .slider class to 62.857% (roughly 220/350) you get a variable height based on the width. If your width grows/shrinks, the height will grow/shrink as well.

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

Edit: I just noticed that none of your code around the slider is responsive. Why are you trying to make the slider responsive?

Answer 2

Checkout this design

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

HTML code

<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 code

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

Hope you will like this design