建立一个具有绝对定位的响应式网站

Question

因此，我尝试在不使用表格的情况下构建此页面，但事实证明，将所有内容排列整齐并保持在一个位置，同时能够根据查看器的屏幕分辨率调整大小，这非常困难。我已将代码放在 JSFiddle here

在我到达教育部分和页脚之前，一切都很好。我不知道为什么它的行为有所不同，因为我从工作信息中复制了教育代码，但不知何故。在 JSFiddle 中查看时，顶部似乎有这么大的空间，而不是在浏览器中查看时。此外，当我缩小浏览器窗口时，它会停留在一个地方，并且工作部分的文本会与它重叠。如果窗口变小，我希望所有内容都调整大小并向下移动，而不仅仅是相互重叠。以下是这些部分的 CSS，但 JSFiddle 上还有更多内容：

#contact {
    margin: 0 auto;
    text-align:center;
    width:37%;
}

#education {
    width:115px;
    height:115px;
    background-color:#dfadec;
    margin-top:1160px;
    margin-bottom:70px;

}
#education p {
    color:#FFF;
    font-size:16px;
    padding-left:10px;
    letter-spacing:0px;
    vertical-align:middle;
    padding-top:47px;
    font-weight:600;
}
#ed_desc {
    position:absolute;
    left:140px;
    top:1660px;
    width:450px;
    font-size:12px;
    text-align:justify;
    line-height:18px;
}

对于页脚，它在一个表格中，无论我做什么，它在我的屏幕上看起来都是正确的，但是如果我调整大小，它就不会移动。它只是停留在一个地方，所以它被切断了。我也觉得我的代码与所有的填充和边距都是一团糟，但在使用这么多 div 时这可能是正常的..？

如果有人可以就我如何清理它并使其更具响应性但仍保持相同的布局提供建议，我将不胜感激。这是它应该是什么样子的屏幕截图：http://i.imgur.com/xopAr8M.jpg

提前致谢！

Answer 1

我的第一个答案。

如果我是你，我会使用 getskeleton，这是一个

响应式、移动友好型开发的精美样板

假设您有 16 列，并根据您希望它们具有的宽度为每个元素设置列数。

在一个容器中，您希望元素的列总和为 16。您可以使用 offset-by 类来实现这一点。

所以我会将这些类添加到您的元素中：

• header：容器（将宽度设置为 100%，适用于不同的屏幕尺寸）
• 标题：五列偏移五
• 导航：六列

下一个也一样。