1

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

一切都很好，直到我到达教育部分和页脚。我不知道为什么它的行为有所不同，因为我从工作信息中复制了教育代码，但不知何故。在 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

提前致谢！

4

1 回答 1

0

My first answer.

If I were you I would use getskeleton , this is a

A Beautiful Boilerplate for Responsive, Mobile-Friendly Development

So imagine you have 16 columns and put each element the number of column based on the width you want them have.

In one container you want the sum of the columns of the elements to be 16. You have the class offset-by to make this happen.

So I would add this classes to your elements:

  • header: container (this set the width to 100%, for different screen sizes)
  • title: five columns offset-by-five
  • nav: six columns

And the same with the next.

于 2013-09-04T00:26:18.630 回答