Question

在this webpage上如果向下滚动到第一个内嵌图像，我会发生前/后javascript滑块。

但是，正常的居中选项对我来说似乎不起作用，最终打破滑块。任何帮助都会很感激。

HTML：

<div class="before_after_slider">
    <div class="photo">
    <div class="after">
    <img src="center_before.jpg" width="1000px" height="600px"  alt="after" />
    </div>
    <div class="before">
    <img src="center_after.jpg" width="1000px" height="600px" alt="before" />
    </div>
    </div>
    </div>
    <div class="caption">
    <p>Roll over the photo with your cursor to see the before/after images. </p>
  </div>

CSS：

.before_after_slider {
    position: relative;
    padding-bottom: 10px;
    width: 55%;
    margin: 0 auto;
  & > * {
    position: relative;
  }
}

.after {
  overflow: hidden;
  position: absolute;
  top: 0px;
  width:1000px;
  height:600px;
}

.caption {
    font-family: helvetica;
    font-weight: 100;
    line-height: 140%;
    letter-spacing: 0px;
    font-size: 13px;
    width: 55%;
    margin: 0 auto;
    padding-top: 0px;
    padding-bottom: 30px;
}

Answer 1

这有很多问题。像外部容器一样，宽度小于内部元件。但是现在你可以试试这个。

.before_after_slider{
width:1000px;
}

与您的图片相同

我怎么能用敏感的javascript水平居中这个div呢？

1 个答案: