Question

我正在修改我从http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/获得的一些CSS代码。它是一个视差CSS3滑块。

我几乎尝试了所有内容，我的问题是我无法在浏览器中将滑动div（da.slide）置于固定的最大宽度中心。最大宽度为970px，并在浏览器调整大小时缩小。我尝试过使用margin: 0 auto和left:50%并且现在仍在使用 - 它只是挂在左边。

我认为可能的问题是滑块div的定位。当我将其从绝对值更改为相对值时，它适用于第一张幻灯片，但其余幻灯片在彼此下方消失/滑动。有没有把滑动div居中的机会？

这是CSS3代码：

.da-slider{
    width: 100%;
    min-width: 320px;
    height: 300px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    background: transparent url(../images/waves.png);
    background-repeat:repeat-x;
    -webkit-transition: background-position 1s ease-out 0.3s;
    -moz-transition: background-position 1s ease-out 0.3s;
    -o-transition: background-position 1s ease-out 0.3s;
    -ms-transition: background-position 1s ease-out 0.3s;
    transition: background-position 1s ease-out 0.3s;
}

.da-slide{
    position: absolute;
    max-width: 970px;
    width:100%; 
    height: 100%;
    top: 0px;
    left: 0px;  
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    text-align: left;

}
.da-slide-current{
    z-index: 1000;
}
.da-slider-fb .da-slide{
    left: 100%;
}
.da-slider-fb  .da-slide.da-slide-current{
    left: 0px;
}
.da-slide h2,
.da-slide p,
.da-slide .da-link,
.da-slide .da-img{
    position: absolute;
    opacity: 0;
    left: 110%;
}
.da-slider-fb .da-slide h2,
.da-slider-fb .da-slide p,
.da-slider-fb .da-slide .da-link{
    left: 10%;
    opacity: 1;
}

HTML是：

<div id="da-slider" class="da-slider">
                <div class="da-slide">
                    <h2>Easy management</h2>
                    <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
                    <a href="#" class="da-link">Read more</a>
                    <div class="da-img"><img src="images/2.png" alt="image01" /></div>
                </div>
                <div class="da-slide">
                    <h2>Revolution</h2>
                    <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
                    <a href="#" class="da-link">Read more</a>
                    <div class="da-img"><img src="images/3.png" alt="image01" /></div>
                </div>
                <div class="da-slide">
                    <h2>Warm welcome</h2>
                    <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
                    <a href="#" class="da-link">Read more</a>
                    <div class="da-img"><img src="images/1.png" alt="image01" /></div>
                </div>
                <div class="da-slide">
                    <h2>Quality Control</h2>
                    <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
                    <a href="#" class="da-link">Read more</a>
                    <div class="da-img"><img src="images/4.png" alt="image01" /></div>
                </div>
                <nav class="da-arrows">
                    <span class="da-arrows-prev"></span>
                    <span class="da-arrows-next"></span>
                </nav>
        </div>

任何帮助都将受到高度赞赏！

Answer 1

.da-slide{
    position: relative;
    margin: 0 auto;
    max-width: 970px;  
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    text-align: left;

}

这似乎对我有用。不确定你想要做什么。

绝对定位会从页面流中获取一个元素。 top，left，right，bottom属性指的是它相对于其父元素的定位。通过将其扩展到100％宽度和100％高度，元素将扩展到其所在容器的大小，禁用是能够居中。

您应该为元素指定一个最小宽度，以便浏览器知道展开/缩回框的大小。应对这些尺寸进行灵活测量，例如百分比。赋予宽度100％意味着元素将扩展到其所在容器的大小.Max和min允许元素以该设置大小停止扩展。

希望有所帮助，乙

Answer 2

这是事后的一点点，但我遇到了类似的问题，Raja。具体来说，我正在使用da-slider（我作为另一个模板的一部分），但滑块中的图像相对于正在查看它们的浏览器没有正确调整大小。因此，当在iPhone上观看时，在PC上看起来不错的较大图像看起来相当大。

为了解决这个问题，我经历了并为每个da-slide div中的图像设置宽度，使其宽度为100％。接下来，我从da-slider类中删除了height属性。最后，我为da-slide设置了display：none，并为da-slide-current类设置了display：block。这阻止了父/容器div同时显示所有图像。最终结果是只显示“当前”图像，容器div相对于浏览器窗口的宽度进行扩展/收缩。

这是最终的da-slider类的样子：

.da-slider{
    width: 100%;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    box-shadow: 0px 1px 1px rgba(0,0,0,0.2), 0px -2px 1px #fff;
    -webkit-transition: background-position 1.4s ease-in-out 0.3s;
    -moz-transition: background-position 1.4s ease-in-out 0.3s;
    -o-transition: background-position 1.4s ease-in-out 0.3s;
    -ms-transition: background-position 1.4s ease-in-out 0.3s;
    transition: background-position 1.4s ease-in-out 0.3s;
}

分别是da-slide和da-slide-current类：

.da-slide{
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    text-align: left;
    display: none;
}
.da-slide-current{
    z-index: 10;
    display: block;
}

最后，da-slide div看起来像：

  <div id="da-slider" class="da-slider">
    <div class="da-slide">
      <img src="assets/img/index/panel1.jpg" style="width: 100%;">
    </div> 
    ...

同样，事情发生得很好（你的问题在这一点上还有一年多的时间），但希望对你或其他人有所帮助。

CSS3滑块 - 响应幻灯片中相对div内的绝对定位

2 个答案: