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佈局 - 垂直來源訂單

回答

相關問題