CSS布局 - 垂直来源订单

是否有一种常见的CSS布局技术来控制页面的垂直来源顺序？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和响应式设计不断推动我的网页内容进一步下降。

来源

2012-05-04 cantera

我发送到我的答案有：http://stackoverflow.com/questions/7425665/switching-the-order-of-block-elements-with-css/14428249#14428249 – kspacja

您不能使用CSS更改页面的源代码。你可以在一定程度上改变HTML输出，但不是这样。

HTML文档中元素的顺序有意义。因此，通常情况下，您的来源无法在其相关内容后面添加标题。在很多情况下，这是定义这种关系的顺序。

你可以做的就是使用CSS技术在视觉上布置这些元素，以便它们显示为不同的顺序。

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

来源

2012-05-04 18:37:31

谢谢 - 我来了这个结论也是如此，特别是在研究了HTML5文档大纲算法 – cantera

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

我还没有时间查看HTML5和CSS3，但它很有可能改变只有CSS的布局。我是一名开发人员，所以我的CSS和HTML技能不如真正的Web制作人员，但是您可以在CSS中使用位置属性。

<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-04 18:58:13 Ronald

之后，让我发布几乎相同的解决方案。关于这一点需要注意的是，它需要头部上的固定高度才能工作。另外，对于一个容器元素，它的位置需要设置为'relative'，我发现最好在其上设置'padding-top'而不是'＃content'上的'margin-top'。 – ScottS

是的，这确实是一个缺点。如果它真的需要灵活（比如RIA-flexible），你需要编写一个javascript来计算每个容器div的大小（之前做过这样的事情）。但我认为它给出了一个想法，这是可能的;） – Ronald

顺便说一句：“圣杯”是指CSS技术的名称，而不是我的目标（请参阅文章：http：//alistapart.com/article/holygrail）。 – cantera

如果你知道你正在移动的地块的高度（如果你正在交换两个地块，它们中的任何一个都有固定的高度就足够了），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。

你既可以用JavaScript补充本旧IE，或者根据设计，它或许可以被接受见好就收块在旧IE（注意顺序错误，很少有智能手机上运行IE浏览器的旧版本，因为即使Windows Phone 7.5运行IE9，如果您只是在移动设备上交换源订单，这也是一个不错的选择）。

来源

2012-09-17 05:01:22

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

您可以使用旧的朋友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; 
    }

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

来源

2015-02-09 17:52:54 Hasanavi

CSS布局 - 垂直来源订单

回答

相关问题