Positioning selectors with correct dimensions that scale on different screen sizes

问题

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

回答1:

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.

来源：https://stackoverflow.com/questions/14064082/positioning-selectors-with-correct-dimensions-that-scale-on-different-screen-siz