css - 构建具有绝对定位的响应式站点

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 , 这是一个

A Beautiful Boilerplate for Responsive, Mobile-Friendly Development

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

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

所以我会将这个类添加到您的元素中:

• header:容器(这将宽度设置为 100%，适用于不同的屏幕尺寸)
• 标题:5 列偏移 5
• 导航:六列

下一个也一样。