5

所以，我一直在尝试在我的网站上创建一个水平滚动页面。我将整个滚动部分设置为 400%，因为我有四页。但是，我想知道是否有可能（使用 CSS、jQuery 等）减少 400%，以便我可以将 0-100% 用于第一页，100%-200% 用于第二页等？或者是否有另一种解决方法（我一直在尝试实现这一点以实现跨浏览器/屏幕尺寸的兼容性）。到目前为止，我只设法使用硬像素来做到这一点，但有没有办法将其更改为百分比？

HTML：

<div id="transition-slide-container">   
   <div id="transition-slide">
       <div id="inner-container>
        <div class="slide" id="home">
            <h1>home</h1>
        </div>
       </div>
        <div class="slide" id="portfolio">
          <div id="inner-container">
            <h1>portfolio</h1>
          </div>
        </div>
        <div class="slide" id="about">
           <div id="inner-container">
            <p>about</p>
           </div>
        </div>                  
        <div class="slide" id="contact">
           <div id="inner-container">
            <p>contact<p>
           </div>
        </div>
    </div>
</div>

CSS：

div#transition-slide-container {    
    background: #bee1ff;    
    padding-top: 128px;
    padding-bottom: 50px;
    height: 900px;
    min-width: 400%;    
    z-index: -1;
    float: left;
    position: relative;
}
div#transition-slide {
    white-space: nowrap;
}
.slide {
    display: inline-block;
    width: 1620px;
    margin: 0 auto; 
}
div#inner-container {
    width: 1024px;
    margin: 0 auto;
    padding: 0;
}

网站：andrewgu12.kodingen.com

4

3 回答 3

0

转换幻灯片的宽度应为 400%，每张幻灯片应为 100%。如果您想使用 javascript/anchors 或 overflow-x:scroll 执行此操作，则容器的宽度为 100%，溢出：隐藏；

于 2013-07-10T07:22:27.247 回答
0

你可以给你的班级100%宽度.slide

.slide {
    display: inline-block;
    width: 100%;
    margin: 0 auto; 
}
于 2013-07-10T07:23:27.090 回答
0

您可以将.slide宽度设置为100%并赋予background-color: #bee1ff;您的身体。

演示

你的#inner-container 在哪里？

于 2013-07-10T08:30:39.567 回答