7

どのような状況でも変更できない .HTML ファイルがあります。

ページの上部にヘッダー DIV (幅 100%)、ナビゲーション DIV (幅 25%) をヘッダー DIV の下の左側に表示し、Sales DIV (幅 75%) を配置する Web ページのスタイルを設定する必要があります。 、Navigation DIV の右側に表示され、Products DIV (幅 100%) が Sales DIV の下に表示されます。

ページ上の他のすべての DIV の下の一番下にあるフッター DIV で、100% 幅。

<body>
    <div id="wrapper">
        <div id="nav"></div>
        <div id="header"></div>
        <div id="sales"></div>
        <div id="products"></div>
        <div id="footer"></div>
    </div>
</body>

HTML DIV の論理的な順序を変更せずに、CSS の配置、フロートなどのみを使用してこれを行うことは可能ですか?

4

5 に答える 5

2

ヘッダーの高さを修正できる場合、それはかなり簡単です。#header に position:absolute または負のマージンを使用するだけです。

#wrapper {positioN:relative;padding-top:100px;}
#header {position:absolute;top:0;width:100%;height:100px;}
#nav {display:inline-block;width:25%;}
#sales {display:inline-block;width:75%;}
#products {margin-left:25%;}
#footer {}

http://jsfiddle.net/FZTj7/1/

そして、これらのインラインブロックをフロートに切り替えて、 #nav を製品ブロックの上部の下に移動させることができます:

#wrapper {positioN:relative;margin:20px;padding-top:100px;}
#header {position:absolute;top:0;width:100%;height:100px;}
#nav {float:left;width:25%;}
#sales {float:left;width:75%;}
#products {margin-left:25%;}
#footer {clear:left;}

http://jsfiddle.net/FZTj7/2/

于 2012-11-23T13:20:14.687 に答える
0

固定位置プロパティを使用して、最上位のプロパティ値を設定します。

于 2012-11-23T12:50:37.610 に答える
0

それはあなたのページの初期構造に大きく依存します。実際に必要な唯一のオプションは、他のcssルールと組み合わせて関連するセクションにfloat：rightまたはfloat：leftを適用してdivをフロートすることです。

position：*の使用は、非常に限られた状況でのみ適用可能であり、要件を満たすのに単独で十分であるとは思えません。

于 2012-11-23T12:50:43.070 に答える
0

最初に cssposition属性を使用する必要があります ( screencast )。

デザインを実現するのに CSS だけでは不十分な場合は、javascript を使用して dom ツリーの div を並べ替えることもできます。たとえば、 JQueryには DOM ノードを操作するためのヘルパーがあります。

いずれにせよ、これらは良い習慣であり、避けるべきですが、ソースを変更できない場合は、ほとんどすべてが残っています.

編集：

JavaScript を使用する場合、div が正しい順序になった後に css をリロードする必要がある場合があります。css のリロードは、javascript を使用して行うこともできます。

于 2012-11-23T13:20:22.157 に答える
0

これが質問に答えていないことはわかっていますが、達成するのが非常に難しい理由は、これが悪い習慣であるためであることを通知することは適切だと思います.

フォーカス順序、SEO、または特別なデバイス (プリンター、スクリーン リーダーなど) に関する問題を回避するには、「コンテンツは意味のある順序で並べる必要があります」。

C27: Making the DOM order match the visual orderを見てください:

于 2012-11-23T13:01:49.010 に答える