选择正确尺寸的选择器，可以在不同的屏幕尺寸上缩放 [英] Positioning selectors with correct dimensions that scale on different screen sizes

问题描述

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

• 寻找有
  
  

   < div id =content> 
  < img id =gridsrc =http://placehold.it/350x250/> 
  < / div> 
    

放置在屏幕中央，等于距左侧，右侧，顶部和底部窗口边缘的距离。

• ，4x2 rowsxcols layout
  
  

   < div id =menustyle =width：150px; float：left;> 
  < b>图片< / b>< br> 
  < ol id =可选> 
   
  < li id =gherkin.jpgclass =ui-state-default>< img src =http://placehold.it/50x40/>< / li> 
  < li id =water.jpgclass =ui-state-default>< img src =http://placehold.it/50x40/>< / li> 
  < li id =tree.jpgclass =ui-state-default>< img src =http://placehold.it/50x40/>< / li> 
  < li id =me.jpgclass =ui-state-default>< img src =http://placehold.it/50x40/>< / li> 
  < li id =hey.jpgclass =ui-state-default>< img src =http://placehold.it/50x40/>< / li> 
  < li id =wutang.jpgclass =ui-state-default>< img src =http://placehold.it/50x40/>< / li> 
  < li id =test.pngclass =ui-state-default>< img src =http://placehold.it/50x40/>< / li> 
  < / ol> 
  < / div> 
  < div id =contentstyle =float：left;> 
  < img id =gridsrc =http://placehold.it/350x250/> 
  < / div> 
    

由于某些原因，我无法调整 #selectable 和 #selectalbe li 元素的高度尺寸。
可选元素不应该被 grid 元素阻挡。

目标是在可能的情况下使用百分比而不是硬编码值，因此页面将呈现正确地在不同大小的设备上。

页眉和页脚div的位置正确。

感谢你的帮助！

Heres是当前布局的jsfiddle ..
http://jsfiddle.net/TdNXD/10/

目标布局，

解决方案

因为这实际上比调整更彻底，这将是一个非常长的回答，显示我所做的所有更改让它起作用。在这方面，请参考结果：

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 居中放置在正确的内容区域中间。在上面的小提琴中，它位于该内容区域的中间（a 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/

上面的确包含了我注意到的一个小问题，当窗口被调整大小时， poad #menu 缩小，这意味着右边 border 的绝对宽度，然后比左侧 #main 稍宽。它可能没有或几乎没有引人注意（例如，也许 6-10px ），但我想我会提到它。

其他需要考虑的事项：

• IE7和8中的布局中断。在IE7中，但在IE8中它仍然非常可怕。我认为IE缺乏对 display：table ， min-width 的支持，还有一些特殊的选择器如 input [type] （等等）是根本原因，但我没有确认哪些需要处理。如果你必须支持这些版本，我会建议使用IE条件样式表来修复IE7 / 8的显示，这将涉及使用 float 技术（不推荐，但是可用）或（ shudder ）用实际表格元素替换语义标记。




• 您确实需要浏览标记和样式表，并且大多数都会看看我在设计中所做的一些决定。我将标记修改为更多语义，因此您会看到HTML5元素，例如部分，不在， article 和 nav 来代替前面的内容。如果我认为合适，我还在 p 标签中包含了一些内容。我现在想的一件事是，股票图像文本应该可能位于 h2 块中，因为这在技术上不是段落文本。对于输入URL 和网格维度也是如此，尽管那些可能适合 fieldset 和 legend 候选人。




• 我的小提琴没有使用的部分，如 #feedback 样式）。 我还给> min-width 几个元素，包括 #container的。这是由于希望在输入URL和网格维度 input s中保持布局完整性。如果您希望它能够真正响应并保持从宽到窄的布局完整性，则需要以特定尺寸属性的某些宽度重新排列这些内容。

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

Trying to build a page layout using html and css, the page contains jQuery UI selector elements

• Looking to have

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

placed in the center of the screen, equal distance from left, right, top and bottom window edges.

• And a left hand menu, containing 8 images, 4x2 rowsxcols layout

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

For some reason I cannot adjust the height dimensions of #selectable and #selectalbe li elements. Selectable elements should not be obstructed by grid element.
Aim is to use percentages when possible instead of hardcoded values so page will render correctly on different sized devices.
The header and footer divs position fine.
Appreciate any help with this!

Heres a jsfiddle of the current layout .. http://jsfiddle.net/TdNXD/10/
Targetted layout, link

解决方案

Since this was really more of an overhaul than a tweak, it would be a very long answer showing all of the changes that I've made to make it work. In that, refer to the result:

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

And the editable fiddle:

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

And in gray tones:

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

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

Now, as your comment indicates, you're trying to center the img in the middle of the right content area. In the above fiddles, it is in the middle... of that content area (a div#main I added). So if we take into account the width of the nav on the left of #main, you get:

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

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

Which in color is easier to see centering of the img if it's all in color:

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

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

The above does include a slight issue I noticed, in that when the window is resized, the poadding on the #menu narrows, which means the absolute width of the right border then becomes slightly wider than the left #main. It's probably not or barely noticeable (as in, maybe 6-10px), but I thought I'd mention it.

Other things to consider:

• The layout breaks in IE7 and 8. It's worse in IE7, but in IE8 it's still pretty horrid. My thought is IE's lack of support for display: table, min-width, and some special selectors like input[type] (etc.) are the root cause, but I have not confirmed which need to be handled. If you have to support these versions, I would suggest using an IE conditional stylesheet to "fix" IE7/8's display, which will either involve using float techniques (not recommended, but doable) or (shudder) replacing the semantic markup with actualtable` elements.

• You really need to go through the markup and stylesheet, and most of all take a look at some of the decisions I incorporated into the design. I modified the markup to be more semantic, so you'll see HTML5 elements like section, aside, article, and nav in place of what was there before. I also wrapped some of the content in p tags if I thought it appropriate. One thing I'm thinking now is that the Stock Images text should probably be in a h2 block, too, since that's not technically not paragraph text. Same goes for Input URL and Grid Dimensions, although those would probably fit as fieldset and legend candidates due to the functionality.

• Note as well I removed from my fiddle the parts that weren't in use, like the #feedback styles).

• I also gave a min-width to several elements, including the #container. This was driven by the desire to maintain layout integrity in the "Input URL" and "Grid dimensions" inputs. If you want it to be truly responsive and maintain layout integrity from wide to narrow, you need to reflow those at certain widths with size-specific properties.

Well, it was still a long answer, but hopefully that helps. Let me know if you have any questions.

这篇关于选择正确尺寸的选择器，可以在不同的屏幕尺寸上缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！