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

リトルフールの答えは、移動しているブロックの高さがわかっている場合にうまく機能します (2 つのブロックを交換する場合は、いずれかの高さが固定されていれば十分です)。

ただし、すべてのブロックの高さが柔軟な場合は役に立ちません。その場合は、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 でブロックを間違った順序のままにしておくことが許容される場合があります (Windows Phone 7.5 でさえ実行されるように、古いバージョンの IE を実行するスマートフォンはほとんどないことに注意してください)。 IE9 に対応しているため、モバイル デバイスでソースの順序のみを交換する場合に適したオプションです)。

于 2012-09-17T05:01:22.937 に答える
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 に答える
2

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

HTML ドキュメント内の要素の順序には意味があります。そのため、通常、ソースの関連コンテンツの後に見出しを付けても意味がありません。多くの場合、その関係を定義するのは順序です。

できることは、CSS テクニックを使用してこれらの要素を視覚的にレイアウトし、それらが異なる順序で表示されるようにすることです。

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

于 2012-05-04T18:37:31.283 に答える
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について言及しているので、古いブラウザについて心配する必要はなく、最新のリリースだけを心配する必要があると思います）.

于 2012-05-04T18:58:13.760 に答える