5

右側にサイドバーがあり、メイン コンテンツがサイドバーの周りを流れる Web ページ レイアウトを作成したいと考えています。

要件：

  1. サイドバーの下のコンテンツは、使用可能な幅をすべて占有する必要があります
  2. サイドバーの下のコンテンツは、サイドバーの左側に到達したときに折り返されるべきではありません
  3. メイン コンテンツは、マークアップのサイドバーよりも前に配置する必要があります
  4. サイドバーの幅は固定ですが、高さは不明/可変です
  5. CSS のみ - JavaScript ソリューションなし

これは、3 番目の要件なしで達成できます。サイドバーがマークアップのメイン コンテンツの前にあり、同じ要素内にある場合、単純な右フロートが機能します。ここでは、マークアップのメイン コンテンツの前にサイドバーを配置することはできません。サイドバーには、補足情報と広告が含まれます。これがマークアップのメイン コンテンツの前にある場合、CSS を使用しないブラウザーやスクリーン リーダーのユーザーにとっては煩わしいものになります (「スキップして ...」リンクがあっても)。

これは、4 番目の要件がなくても達成できます。サイドバーの高さが固定されている場合、コンテンツを含む要素をメイン コンテンツの前に配置し、右にフロートさせて適切な幅と高さを与え、絶対配置を使用してサイドバーを事前に作成されたスペースの上に配置できます。

マークアップの例 (CSS なし、関連するビットのみ):

<body>
  <div id="content">
    <p>
      Lorem ipsum ....
    </p>
    <p>
      Pellentesque ....
    </p>
    <div id="sidebar">
      /* has some form of fixed width */
    </div>
  </div>
</body>

レイアウト例:

代替テキスト http://webignition.net/images/layoutexample.png

これが可能かどうかはわかりません。これは達成できないという信頼できる回答を喜んで受け入れます。これが達成できない場合は、説明をいただければ幸いです。達成できない理由を知ることは、単にできないと言われるよりもはるかに価値があります。

更新: 5 つの要件のすべてを満たしていない回答が表示されることを嬉しく思います。ただし、どの要件が無視されているか、および要件を無視した場合の結果 (長所と短所) が回答に記載されている場合に限ります。その後、情報に基づいた妥協を行うことができます。

更新 2 : 要件 3 を無視することはできません。サイドバーをコンテンツの前に置くことはできません。

4

6 に答える 6

3

ソースの順序が逆の単純なフローティングは実行できません（CSS3ドラフト仕様なし）。実用的なアプローチは、最初に、希望するソースの順序をサポートする優れたレイアウトを構築することです。HTML：

<div id="content" class="noJs">
  <div id="floatSpace"></div>
  <p>Lorem ipsum ....</p>
  <p>Pellentesque ....</p>
  <div id="sidebar">content</div>
</div>

CSS：

#content {position:relative;}
#sidebar {width:150px; position:absolute; top:0; right:0;}
.noJs {padding-right:150px;}
.noJs #floatSpace {display:none;}
.js #floatSpace {float:right; width:150px;}

これは、1と2を除くすべてを満たします。ここで、JSを追加します。

$(function () {
  // make floatSpace the same height as sidebar
  $('#floatSpace').height($('#sidebar').height());
  // trigger alternate layout
  $('#content')[0].className = 'js';
});

これにより、コンテンツが#floatSpaceの周りに浮かび、＃sidebarはその上に配置されたままになります。ソースの順序は同じままであるため、これは#sidebarを移動するよりも優れています（Javascriptなどをサポートするスクリーンリーダーの場合）。

これが実際のJSFiddleです。このレイアウトには、floatSpaceの高さをサイドバーの高さと同期させるという不幸な要件があります。サイドバーが動的であるか、遅延読み込みコンテンツがある場合は、再同期する必要があります。

于 2008-11-06T14:17:17.667 に答える
2

サイドバーを最初にして、この順序を変更する必要があると思います。次に、CSS のfloatプロパティを使用します (順序を変更せずにdiv#sidebar、段落の下とその隣になります)。div#sidebar高さのために必要に応じて伸ばす必要があります。

CSS:

#sidebar {
    float: right;
    width: 50px;
}

HTML:

<body>
  <div id="content">
    <div id="sidebar">
      /* has some form of fixed width */
    </div>

    <!-- paragraphs -->
  </div>
</body>

@ジョン・クラム[コメント]

わかりました...nvm。あなたは自分の答えを述べ、同時にそれを拒否しました。

その前に定義されている他の要素の周りに要素を浮動させることはできません。ブラウザーは、「何を浮かび上がらせますか?」という質問に答えることができなければなりません。そして、開始する次の要素に目を向け、必要なところまで続けます。

于 2008-11-06T09:57:30.953 に答える
2

わかりました、別の答えがあります。要件の 1 つを無視できるので、コンテンツがサイドバーの下に折り返される最初の要件をスキップします。

#sidebar {
  float: left;
  width: 100px;
}
#actualContent {
  width: 700px;
  float: left;
}

コードの唯一の変更点は、実際のコンテンツを別のラッパーに配置する必要があることです。

<div id="content">
    <div id="actualContent">
        <p>...</p>
        <p>...</p>
    </div>
    <div id="sidebar">
        <p>...</p>
    </div>
</div>
于 2008-11-06T10:10:03.580 に答える
1

サイドバーがコンテンツの前に来るように HTML を再配置できれば、これは簡単です。

#sidebar { float: right; width: 150px; }

#content..そして、後で（ divの最後で）必ずクリアしてください。

あなたの意図が正しい場所にあり、正しい順序でコンテンツを提供していることは知っていますが、視覚障害のあるユーザーからの大量のトラフィックが予想される場合を除き、優先順位を再検討する必要があると思います.

于 2008-11-06T10:01:22.940 に答える
0

今のところテストする場所がなく、うまくいくかどうかもわかりませんが、サイドバーの div をインラインで表示して、そこから移動してみましたか?

于 2008-11-06T10:47:32.553 に答える
0

私の知る限り、（明らかなマークアップの並べ替えなしで）必要な場所にサイドバーを表示する唯一の方法は、設定#content { position: relative; }して#sidebar { position: absolute; right: 0; top: 0; }

残念ながら、絶対配置ではサイドバーがフロー レイアウトから外れてしまい、コンテンツが思いどおりに表示され#contentなくなります。#sidebar

于 2008-11-06T10:10:18.930 に答える