1

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

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

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

……到这……

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

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

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

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

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

4

4 回答 4

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）

注意事项：

  1. 它最多只能用于 3 个块（您可以通过嵌套获得更多）。

  2. 它在 IE6/7 中不起作用，在 IE8 中有一些皱纹。

  3. 许多浏览器（Firefox 除外？）不允许为替换元素（如图像）赋予这些显示值（testcase），因此您必须将它们包装在 div 中并重新排序 div 。

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

于 2012-09-17T05:01:22.937 回答
2

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

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

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

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

于 2012-05-04T18:37:31.283 回答
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，我想您不必担心旧版浏览器，只需担心最新版本）。

于 2012-05-04T18:58:13.760 回答
2

您可以使用老朋友 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/

于 2015-02-09T17:52:54.120 回答