CSS 布局 - 垂直源顺序答案

【问题标题】：CSS Layout - Vertical Source OrderCSS 布局 - 垂直源顺序
【发布时间】：2012-05-14 07:06:21
【问题描述】：

是否有一种通用的 CSS 布局技术来控制页面的垂直源顺序？

例如，我可以改变这个...

<container>
    <header></header>
    <content></content>
    <footer></footer>
</container>

...到这个...

<container>
    <content></content>
    <header></header>
    <footer></footer>
</container>

...虽然<header> 仍然出现在页面顶部，<content> 上方？

换句话说，我想将用于控制水平源顺序的技术（例如“One True Layout”和“Holy Grail”）应用于页面的垂直源顺序。

这个question 提出的问题基本相同，但响应者似乎没有得到所问的内容，而且提问者的解决方案似乎很麻烦。

我可能会因为微优化而受到批评，但Mega Menus 和响应式设计不断将我的页面内容推得越来越低。

【问题讨论】：

我发送给我的答案：stackoverflow.com/questions/7425665/…

标签： css layout responsive-design

【解决方案1】：

您不能使用 CSS 更改页面的来源。您可以在一定程度上改变 HTML 输出，但不能以这种方式。

HTML 文档中元素的顺序是有意义的。因此，通常情况下，您的来源在其相关内容之后有一个标题是没有意义的。在许多情况下，正是顺序定义了这种关系。

您可以做的是使用 CSS 技术在视觉上布置这些元素，使它们看起来以不同的顺序排列。

但是它们在 HTML 中的垂直顺序在语义上应该是合乎逻辑的。

【讨论】：

谢谢 - 我也得出了这个结论，尤其是在研究了 HTML5 文档大纲算法之后

【解决方案2】：

你应该知道搜索“圣杯”是毫无用处的。虽然我能理解你为什么要把内容部分放在前面。通常搜索引擎索引内容上的页面，因为它们出现在 html 中。首先有一堆标题和其他东西不会有任何好处。

我还没有时间研究 HTML5 和 CSS3，但是很可能只用 css 来改变你的布局。我是一名开发人员，所以我的 css 和 html 技能不如真正的网络制作人，但你可以在 CSS 中使用 position 属性。

<div id="content">this is your content</div>
<div id="header">this is the header</div>
<div id="footer">this is your footer</div>

此 html 仍然可以使用以下 css 在您的页面顶部显示标题标签。

    #header
    {
        height:100px;
        width:100%;
        background-color:Red;
        position:absolute;
        top:0;
    }
    #content
    {
        margin-top:100px;
        height:500px;
        background-color:Green;
    }
    #footer
    {
        height:100px;
        background-color:Blue;
    }

我希望它能让您了解什么是可能的。（既然您提到了 HTML5，我想您不必担心旧版浏览器，只需担心最新版本）。

【讨论】：

击败我发布几乎相同的解决方案。需要注意的一件事是，它需要标题上的固定高度才能工作。此外，对于容器元素，它的位置需要设置为relative，我发现最好在其上设置padding-top，而不是在#content 上设置margin-top。
是的，这确实是一个缺点。如果它真的需要灵活（如 RIA-flexible），您需要编写一个 javascript 来计算调整大小时的每个容器 div（以前做过这样的事情）。但我认为它给出了一个可能的想法；）
顺便说一句：“圣杯”指的是同名的 CSS 技术，而不是我的目标（参见文章：alistapart.com/article/holygrail）。

【解决方案3】：

如果您知道要移动的方块的高度，Littlefool 的回答会很有效（如果您要交换两个方块，则它们中的任何一个具有固定高度就足够了）。

但是，如果所有块都具有灵活的高度，那也无济于事。在这种情况下，您可以尝试http://tanalin.com/en/articles/css-block-order/ 中的技术：

<div class="container">
    <div class="block-1">1st block</div>
    <div class="block-2">2nd block</div>
    <div class="block-3">3rd block</div>
</div>
<style>
    .container { display: table; width: 100%; }
    .block-1 { display: table-footer-group; } /* Will display at the bottom. */
    .block-2 { display: table-row-group;    } /* Will display in the middle. */
    .block-3 { display: table-header-group; } /* Will display at the top. */
</style>

（见演示：http://jsbin.com/etujad/11/edit）

注意事项：

它最多只能用于 3 个块（您可以通过嵌套实现更多）。
在IE6/7下不行，还有一些wrinkles in IE8。
许多浏览器（Firefox 除外？）不允许将图像等替换元素赋予这些显示值 (testcase)，因此您必须将它们包装在 div 中并重新排序 div。

您可以为旧版 IE 使用 JavaScript 来补充它，或者根据设计，在旧版 IE 中以错误的顺序保留块可能是可以接受的（请注意，很少有智能手机运行旧版 IE，甚至 Windows Phone 7.5 运行 IE9，因此如果您只是在移动设备上交换源顺序，这是一个不错的选择。

【讨论】：

谢谢 - 这是一个非常有趣的显示实现：表格布局

【解决方案4】：

您可以使用老朋友 display:table 重新排序您的元素。

假设这是您的来源。

<div id="container">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

为了重新排序试试这个。

   #container{
      display: table;
   }

   #content{
     display: table-header-group;
   }

    #header{
     display: table-row-group;
   }

    #footer{
     display: table-footer-group;
   }

砰。你说对了。这是概念的证明。 http://jsfiddle.net/k0La8egp/1/

【讨论】：