CSS Layout - Vertical Source Order

Question

ページの垂直ソースの順序を制御するための共通の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とレスポンシブルデザインは、ページコンテンツをさらに押し下げ続けています。

Answer 1

CSSを使用してページのソースを変更することはできません。あなたは、ある程度軽度で、HTML出力を変更することはできますが、この方法で変更することはできません。

HTMLドキュメント内の要素の順序は意味を持ちます。したがって、一般的に、あなたのソースに関連するコンテンツの後に続く見出しがあるのは意味がありません。多くの場合、その関係を定義する順序です。あなたは何ができるか

は、彼らが異なるためにあるように表示されるように、視覚的に、これらの要素をレイアウトするCSS技術を使用しています。

しかし、HTMLの垂直順序は意味論的に論理的でなければなりません。

Answer 2

あなたは「聖杯」を検索すると、かなり無用であることを知っている必要があります。なぜ私はあなたが前にコンテンツセクションを持っているかを理解することができます。通常、検索エンジンはコンテンツのページを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と言いますから、古いブラウザについては心配する必要はありませんが、最新のリリースのみを心配する必要はありません）。あなたは（あなたが二つのブロックを交換している場合、それは一定の高さを持っているためにそれらのいずれかのために十分だ）あなたが移動しているブロックの高さを知っていれば

Answer 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では動作しません。wrinkles in IE8があります。

3. 多くのブラウザ（Firefoxを除く）では、画像などの置換された要素にこれらの表示値（testcase）を与えることはできないため、divに改めてdivを並べ替える必要があります。あなたが古いIEのためのJavaScriptでこれを補うことができいずれか、または設計に応じて、それだけで非常に少数のスマートフォンは、IEの古いバージョンを実行して、古いIE（ノートで間違った順序でブロックを残すにしてもよいかもしれません

Windows Phone 7.5でもIE9が動作するので、モバイルデバイス上でソースオーダーを交換するだけであれば、これは良い選択です）。

Answer 4

旧友のディスプレイ：テーブルを使用して要素を並べ替えることができます。

これはあなたのソースです。

<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/