Question

我是关于新网站的编码，但我在完成所有设计和SEO要求方面遇到了一些麻烦。全屏网站的最大宽度为950px，顶部和底部的页面宽度为一个中心区域，左侧部分宽度为200px，内容区域为动态宽度 - 当网站显示为小型时屏幕顶部和底部将保持顶部和底部，但左侧将移动到内容下方。对SEO的要求是，代码中的内容应放在左侧部分之上，并且没有javascript用于修复设计问题。

我的一个大问题是放置左边的部分，因为如果我使用绝对位置，底部不会是页面的底部 - 并且使用float会给我带来麻烦，当屏幕小于950px但超过320px我改变左边的位置

有人能举例说明这些要求吗？

编辑：

具有绝对位置的简单示例;

<!doctype html>
<html>
<head>
  <title>TEST</title>
</head>
<body>
  <div style="max-width: 750px; background-color: Red;">TOP</div>
  <div style="max-width: 750px; position: relative;">
    <div style="margin-left: 200px; background-color: Green;">CONTENT</div>
    <div style="width: 200px; position: absolute; top: 0; background-color: Silver;">LEFT<br>LEFT<br>LEFT<br>LEFT</div>
  </div>
  <div style="max-width: 750px; background-color: Blue;">BOTTOM</div>
</body>
</html>

Answer 1

只需使用'float：right;' - http://jsfiddle.net/ZeFf4/

Answer 2

已关闭 - 如果不使用JavaScript，似乎无法实现。

响应式网页设计问题

2 个答案: