jquery - 定位选择器具有在不同屏幕尺寸上缩放的正确尺寸

Question

尝试使用 html 和 css 构建页面布局，该页面包含 jQuery UI 选择器元素

• 希望有

  <div id="content">
      <img id="grid" src="http://placehold.it/350x250"/>
  </div>
  

放置在屏幕中央，与左、右、上、下窗口边缘的距离相等。

• 还有一个左侧菜单，包含 8 张图像，4x2 行 x 列布局

  <div id="menu" style="width:150px;float:left;">
      <b>Stock images</b><br>
          <ol id="selectable">
              <li id="house.jpg" class="ui-state-default"><img src="http://placehold.it/50x40"/></li>
              <li id="gherkin.jpg" class="ui-state-default"><img src="http://placehold.it/50x40"/></li>
              <li id="water.jpg" class="ui-state-default"><img src="http://placehold.it/50x40"/></li>
              <li id="tree.jpg" class="ui-state-default"><img src="http://placehold.it/50x40"/></li>
              <li id="me.jpg" class="ui-state-default"><img src="http://placehold.it/50x40"/></li>
              <li id="hey.jpg" class="ui-state-default"><img src="http://placehold.it/50x40"/></li>
              <li id="wutang.jpg" class="ui-state-default"><img src="http://placehold.it/50x40"/></li>
              <li id="test.png" class="ui-state-default"><img src="http://placehold.it/50x40"/></li>
      </ol>
  </div>
  <div id="content" style="float:left;">
      <img id="grid" src="http://placehold.it/350x250"/>
  </div>
  

出于某种原因，我无法调整 #selectable 和 #selectalbe li 元素的高度尺寸。 可选元素不应被 grid 元素遮挡。
目标是尽可能使用百分比而不是硬编码值，以便页面能够在不同尺寸的设备上正确呈现。
页眉和页脚 div 位置很好。
感谢对此的任何帮助!

这是当前布局的 jsfiddle .. http://jsfiddle.net/TdNXD/10/
有针对性的布局，link

Answer 1

由于这实际上更像是一次大修而不是调整，所以这将是一个很长的答案，显示我为使其正常工作所做的所有更改。在那，引用结果:

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

还有可编辑的 fiddle :

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

灰色调:

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

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

现在，正如您的评论所表明的，您正在尝试将 img 置于右侧内容区域的中央。在上面的 fiddle 中，它位于该内容区域的中间(我添加的 div#main)。因此，如果我们考虑 #main 左侧的 nav 的宽度，您会得到:

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 上的 poadding 变窄了，这意味着右边的 border 然后变得比左边的 #main 稍微宽一些。它可能不会或几乎不会引起注意(例如，可能 6-10px)，但我想我会提到它。

其他需要考虑的事情:

• 布局在 IE7 和 8 中中断。在 IE7 中情况更糟，但在 IE8 中它仍然非常糟糕。我的想法是 IE 不支持 display: table、min-width 和一些特殊的选择器，如 input[type](等)是根本原因，但我还没有确认哪些需要处理。如果您必须支持这些版本，我建议使用 IE 条件样式表来“修复”IE7/8 的显示，这将涉及使用 float 技术(不推荐，但可行)或(shudder) 用实际的 table` 元素替换语义标记。

• 您确实需要仔细阅读标记和样式表，最重要的是查看我纳入设计的一些决定。我修改了标记以使其更加语义化，因此您将看到 HTML5 元素，如 section、aside、article 和 nav 代替之前的内容。如果我认为合适的话，我还将一些内容包装在 p 标签中。我现在在想的一件事是 Stock Images 文本也应该在 h2 block 中，因为从技术上讲这不是段落文本。 Input URL 和 Grid Dimensions 也是如此，尽管由于功能。

• 同时请注意，我从我的 fiddle 中删除了未使用的部分，例如 #feedback 样式)。

• 我还为几个元素指定了 min-width，包括 #container。这是因为希望在“输入 URL”和“网格维度”input 中保持布局完整性。如果您希望它具有真正的响应能力并保持从宽到窄的布局完整性，您需要使用特定于尺寸的属性以特定宽度重排它们。

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