Question

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

我必须设置网页的样式，使页眉顶部的页眉DIV（100％宽度），导航DIV（25％宽度）显示在页眉DIV左下方，销售DIV（75）％width），显示在Navigation DIV的右侧，产品DIV（100％宽度）低于Sales 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定位，浮动等的情况下执行此操作？

Answer 1

如果您可以修复标题高度，那么它非常简单，只需使用#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/

Answer 2

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

Answer 3

这在很大程度上取决于页面的初始结构。你真正唯一的选择是通过将float：right或float：left与其他css规则结合使用来浮动div。

使用职位：*仅适用于非常有限的情况，我怀疑仅此一项是否足以满足您的要求。

Answer 4

我知道这并没有回答这个问题，但我想有必要通知它之所以难以实现的原因是因为这是一种不好的做法。

为避免焦点顺序，搜索引擎优化或特殊设备（打印机，屏幕阅读器......）出现问题：“内容应以有意义的顺序排序”。

请看一下：C27: Making the DOM order match the visual order

Answer 5

使用css position属性应首先尝试（screencast）。

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

这些在任何情况下都是良好的做法，然后应该避免，但如果你不能改变你所剩下的所有来源。

编辑：

如果你使用javascript，你可能必须在div以正确的顺序重新加载css。重新加载CSS也可以实现using javascript。

有没有办法只使用CSS改变HTML DIV的顺序？

5 个答案: