7

我有一个在任何情况下都无法更改的 .HTML 文件。

我必须设置网页样式，使页面顶部的标题 DIV（100% 宽度），导航 DIV（25% 宽度）出现在标题 DIV 下方的左侧下方，销售 DIV（75% 宽度） ，出现在导航 DIV 的右侧，产品 DIV（100% 宽度）位于销售 DIV 下方。

页脚 DIV 位于页面上所有其他 DIV 下方的最底部，宽度为 100%。

<body>
    <div id="wrapper">
        <div id="nav"></div>
        <div id="header"></div>
        <div id="sales"></div>
        <div id="products"></div>
        <div id="footer"></div>
    </div>
</body>

是否可以在不更改 HTML DIV 的逻辑顺序且仅使用 CSS 定位、浮动等的情况下做到这一点？

4

5 回答 5

2

如果您可以修复标题高度，那么它非常简单，只需使用 position:absolute 或 #header 的负边距：

#wrapper {positioN:relative;padding-top:100px;}
#header {position:absolute;top:0;width:100%;height:100px;}
#nav {display:inline-block;width:25%;}
#sales {display:inline-block;width:75%;}
#products {margin-left:25%;}
#footer {}

http://jsfiddle.net/FZTj7/1/

并且这些内联块可以切换到浮动，以使#nav 低于产品块的顶部：

#wrapper {positioN:relative;margin:20px;padding-top:100px;}
#header {position:absolute;top:0;width:100%;height:100px;}
#nav {float:left;width:25%;}
#sales {float:left;width:75%;}
#products {margin-left:25%;}
#footer {clear:left;}

http://jsfiddle.net/FZTj7/2/

于 2012-11-23T13:20:14.687 回答
0

position应该首先尝试使用 css属性（截屏视频）。

如果 CSS 不足以实现您的设计，另一种可能性是使用 javascript 重新排序 dom 树中的 div。例如， JQuery具有操作 DOM 节点的助手。

在任何情况下，这些都是很好的做法，因此应该避免，但如果您无法更改源代码，那么您就只剩下所有这些了。

编辑：

如果您使用 javascript，您可能必须在 div 以正确的顺序排列后重新加载 css。重新加载 css 也可以使用 javascript来实现。

于 2012-11-23T13:20:22.157 回答
0

我知道这并不能回答问题，但我想通知它如此难以实现的原因是因为这是一种不好的做法。

为避免焦点顺序、SEO 或特殊设备（打印机、屏幕阅读器等）出现一些问题：“内容应按有意义的顺序排列”。

看看：C27：使 DOM 顺序与视觉顺序相匹配

于 2012-11-23T13:01:49.010 回答
0

使用固定位置属性并设置顶部属性值。

于 2012-11-23T12:50:37.610 回答
0

这在很大程度上取决于页面的初始结构。您真正拥有的唯一选择是通过将 float:right 或 float:left 应用于相关部分并结合其他 css 规则来浮动 div。

使用 position:* 仅适用于非常有限的情况，我怀疑仅此一项就足以满足您的要求。

于 2012-11-23T12:50:43.070 回答