Question

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

希望有

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

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

左手菜单，包含8张图片，4x2行xxols布局

<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元素不应阻碍可选元素目标是尽可能使用百分比而不是硬编码值，以便在不同大小的设备上正确呈现页面页眉和页脚的位置很好感谢任何帮助！

这是当前布局的一个方面.. http://jsfiddle.net/TdNXD/10/
目标布局link

Answer 1

由于这实际上更像是一次改革，而不是一次调整，这将是一个非常长的答案，显示我为使其发挥作用而做出的所有改变。在那里，请参考结果：

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/

以上确实包含了我注意到的一个小问题，因为当调整窗口大小时，poadding上的#menu会变窄，这意味着右border的绝对宽度变得略宽于左#main。它可能不是或几乎不可察觉（例如，可能是6-10px），但我想我会提到它。

需要考虑的其他事项：

IE7和8中的布局中断。在IE7中情况更糟，但在IE8中，它仍然非常可怕。我的想法是IE缺乏对display: table，min-width的支持，而input[type]（等）等一些特殊选择器是根本原因，但我还没有确认哪个需要处理。如果你必须支持这些版本，我建议使用IE条件样式表来“修复”IE7 / 8的显示，这将涉及使用float技术（不推荐，但可行）或（ shudder < / em> ) replacing the semantic markup with actual table` elements。

你真的需要通过标记和样式表，最重要的是看看我在设计中加入的一些决定。我将标记修改为更具语义性，因此您将看到HTML5元素，例如section，aside，article和nav，而不是之前的内容。如果我认为合适，我还会在p标签中包含一些内容。我现在想的一件事是，Stock Images文本也应该在h2块中，因为从技术上讲，这不是段落文本。 Input URL和Grid Dimensions也是如此，但由于功能原因，这些候选人可能会成为fieldset和legend候选人。

请注意，我从我的小提琴中移除了未使用的部分，例如#feedback样式。

我还给了几个元素min-width，包括#container。这是由于希望在“输入网址”和“网格维度”input中维护布局完整性。如果您希望它真正响应并保持从宽到窄的布局完整性，则需要使用特定于大小的属性重排某些宽度的那些。

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

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

1 个答案: