0

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

  • 期待拥有

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

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

  • 还有一个左侧菜单，包含 8 张图片，4x2 rowsxcols 布局

    <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/
目标布局，链接

4

1 回答 1

0

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

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/

以上确实包括我注意到的一个小问题，因为当调整窗口大小时，poaddingon#menu变窄了，这意味着 right 的绝对宽度border变得比 left 略宽#main。它可能不会或几乎不引人注意（如，也许6-10px），但我想我会提到它。

其他需要考虑的事项：

  • IE7 和 8 中的布局中断。在 IE7中更糟，但在 IE8 中仍然很糟糕。我的想法是 IE 缺乏对 , 的支持display: table，min-width而一些特殊的选择器如input[type](etc.) 是根本原因，但我还没有确认哪些需要处理。如果您必须支持这些版本，我建议使用 IE 条件样式表来“修复”IE7/8 的显示，这将涉及使用float技术（不推荐，但可行）或（颤抖) replacing the semantic markup with actual 表元素。

  • 你真的需要仔细阅读标记和样式表，最重要的是看看我在设计中加入的一些决定。我将标记修改为更具语义性，因此您将看到 HTML5 元素，如section、aside、article和nav，代替之前的元素。p如果我认为合适的话，我还将一些内容包装在标签中。我现在在想的一件事是Stock Images文本可能也应该放在一个h2块中，因为从技术上讲，这不是段落文本。Input URL和 也是如此，尽管由于功能的原因，它们可能适合作为候选者Grid Dimensions。fieldsetlegend

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

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

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

于 2012-12-30T01:40:40.203 回答