问在不同屏幕尺寸上具有正确尺寸的定位选择器

EN

由于这实际上是一次彻底的改革，而不是一次调整，这将是一个很长的答案，显示了我为使它发挥作用所做的所有改变。在这方面，请参考结果：

http://fiddle.jshell.net/userdude/TdNXD/16/show/light/

和可编辑的小提琴：

http://fiddle.jshell.net/userdude/TdNXD/16/

并以灰色色调：

http://fiddle.jshell.net/userdude/TdNXD/17/show/light/ http://fiddle.jshell.net/userdude/TdNXD/17/

现在，正如您的评论所指出的，您正在尝试将img放在正确内容区域的中间。在上面的小提琴里，它在中间.在这个内容区域(我添加了一个div#main )。因此，如果我们考虑到nav在#main左侧的宽度，您将得到：

http://fiddle.jshell.net/userdude/TdNXD/19/show/light/ http://fiddle.jshell.net/userdude/TdNXD/19/

如果所有的颜色都在颜色上，那么在颜色上更容易看到img的中心：

http://fiddle.jshell.net/userdude/TdNXD/20/show/light/ http://fiddle.jshell.net/userdude/TdNXD/20/

上面确实包含了一个我注意到的小问题，即当窗口调整大小时，#menu上的#menu就会变窄，这意味着右border的绝对宽度会比左#main稍微宽一些。它可能不明显或几乎不明显(比如在6-10px中)，但我想我应该提一下。

其他需要考虑的事项：

• 布局在IE7和8中中断。在IE7中更糟糕，但在IE8中仍然非常糟糕。我的想法是IE缺乏对display: table、min-width和一些特殊选择器(如input[type]等)的支持。是根本原因，但我还没有确认哪一个需要处理。如果您必须支持这些版本，我建议使用IE条件样式表“修复”IE7/8的显示，这将涉及使用float技术(不推荐，但可行)或(颤抖的) replacing the semantic markup with actual表`元素)。
• 您确实需要查看标记和样式表，最重要的是，请看一下我在设计中包含的一些决策。我修改了标记，使其更具语义性，因此您将看到HTML5元素(如section、aside、article和nav )取代了以前的内容。如果我认为合适的话，我也用p标记包装了一些内容。我现在想的一件事是，Stock Images文本可能也应该位于一个h2块中，因为从技术上讲，这不是段落文本。Input URL和Grid Dimensions也是如此，不过由于功能的原因，它们可能适合作为fieldset和legend的候选产品。
• 注意，我还从小提琴中删除了没有使用的部件，比如#feedback样式)。
• 我还给了几个元素一个min-width，包括#container。这是因为您希望在“输入URL”和“网格维度”input中保持布局完整性，如果您希望它能够真正响应并从宽到窄维护布局完整性，则需要用特定大小的属性在特定宽度上重新设置布局完整性。

嗯，这仍然是一个很长的答案，但希望这会有所帮助。如果你有任何问题，请告诉我。