问题与响应网页设计

-1

我是关于编码新网站，但我有一些麻烦履行所有设计和搜索引擎优化要求。全屏网站的最大宽度为950px，顶部和底部为全宽页面，中心区域为左部分宽度为200px，内容区域为动态宽度 - 当网站显示为小屏幕顶部和底部将保持顶部和底部，但左侧将移动到内容下方。对搜索引擎优化的要求是，代码中的内容应放置在左侧部分之上，并且没有JavaScript用于解决设计问题。问题与响应网页设计

我的大问题是放置左侧部分，因为如果我使用绝对位置，底部不会是页面的底部 - 并且使用浮动会给我带来麻烦，当屏幕小于950像素而超过320像素时，剩下。

任何人都可以给我一个例子满足这些要求吗？

编辑：

一个简单的例子与绝对位置;

<!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>

来源

2012-06-24 keysersoze

请提供代码或网站链接 –

我不认为这是可能的纯CSS。颠倒这样的源码顺序通常需要浮动，并且他们不会按照您希望的那种灵活的布局工作。 –

已关闭 - 如果没有使用JavaScript，似乎不可能。

来源

2013-01-09 19:18:42 keysersoze

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

来源

2012-06-24 21:47:24

你的代码的工作原理是因为你为所有元素设置了px-widths - 尝试对元素和动态宽度使用max-width到content div。 – keysersoze

这是相同的：http://jsfiddle.net/ZeFf4/1/ –

我很满意我可以得到的帮助，但正如我看到它的例子仍不符合要求 - 左总是必须是200px加上固定页面和CONTENT的左侧必须具有动态宽度。您的代码“有效”，因为左侧和内容都有动态宽度和最小/最大宽度。 – keysersoze

问题与响应网页设计

回答

相关问题