0

我正在尝试使用 Scrollit.js、http ://bytemuse.com/scrollIt.js/、jquery-1.10.2.min.js 和响应式网格系统http://www.responsivegridsystem 创建一个投资组合网站。 com。我想这有点出乎我的意料，因为这一切都被抬高了。这是正在发生的事情：

在此处输入图像描述

^那个蓝色不应该在那里，但在较小的窗口中不是问题。

问题不大

^ 问题不大

在此处输入图像描述

^这里是它被顶起的地方。背景应该是白色的，蓝色不应该从顶部和底部窥视。这在较小的窗口中也是一个问题。

在此处输入图像描述

^...只是，呃。非常令人沮丧。

我一直在篡改我的代码几个小时，我不知道下一步该做什么。如果有人可以提出建议，我将不胜感激！这里有一个代码： http: //jsfiddle.net/p28w9/我认为问题会在这个 CSS 片段中的某个地方找到，但我无法真正说出原因，我不能确定我是否是的。这就是为什么我需要一些帮助。>.<

/*  SECTIONS  */
section {
    padding-top: 60px;
    height: 838px;
    width: 100%;
}

#work {
    margin-top: 200px;
    padding: 50px;
}

section:nth-child(odd) {
    padding-top: 260px;
    height: 320px;
    background-color: #1ab7ea;
    color: #fff;
}

/*.section {
    clear: both;
    padding: 0px;
    padding: 20px;
}*/

section .content {
    margin: 160px auto;
    max-width: 640px;
}
4

1 回答 1

0

我可以立即指出的一个问题是您为部分设置的高度。我建议您使用至少1200 像素的高度，并让所有部分的 padding-top 保持相同。

section {
padding-top: 80px;
height: 1200px;
width: 100%;
}

同样在您的第 nth-child 部分，您不应该设置额外的高度或填充，因为这会弄乱您的 Scrollit。下面的CSS对你来说很好。

section:nth-child(odd) {
background-color: #1ab7ea;
color: #fff;
}

我要提到的另一件事是，在高于 1200 像素的分辨率（在 Y 轴上）将导致下一页的一部分位于上一页的底部。所以在开始你的作品集之前，你应该问问自己，你希望你的网站可以使用的最大分辨率是多少。

希望对你有帮助，

问候，

灭霸

于 2013-07-30T04:09:58.423 回答