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：container（对于不同的屏幕尺寸，此宽度设置为100％）
标题：五列抵消
nav：六列

与下一个相同。

建立具有绝对定位的响应式站点

1 个答案: