1

1 つまたは 2 つの div を含む「コンテナ」があります。「コンテンツ領域」とオプションの「サイドバー」を考えてみてください。

右側がサイドバー、左側がコンテンツエリアです。サイドバーが表示されるときは固定幅です。

JavaScript を使用せずに、またその場で html に追加のタグやスタイルを配置せずに、コンテンツ コンテナーを縮小して列を並べて保持するにはどうすればよいですか?

基本的なコードは次のとおりです。

<div id='container'>
   <div id='content-area'> ... </div>
   <div id='sidebar' style='width: 200px;'> ...</div>
</div>

単純に 1 つを左に、もう 1 つを右にフロートさせてみましたが、その場合でもコンテンツは全幅のままで、サイドバーからはみ出してレイアウトされます。

サイドバーが表示されるページがわかっている場合は、コンテナーにクラス (それらのページのみ) を指定し、クラスに固定幅を指定できます。しかし、サイドバーがどのページに表示されるかわかりません!

4

2 に答える 2

4

CSS隣接兄弟セレクター #sidebar + #content-areaを使用すると、コンテンツ領域をターゲットにして、コンテナー内にサイドバーのみが存在する場合に右マージンを適用できます。

例はこちら

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

#sidebar + #content-area {
  margin-right: 200px; /* equal to the width of the sidebar */
}

5.7 隣接する兄弟セレクター

隣接する兄弟セレクターの構文は次のとおりです。 E1 + E2, E2はセレクターのサブジェクトです。セレクターは、 ドキュメント ツリーで同じ親E1を 共有し、 の直前にある場合に一致し、非要素ノード (テキスト ノードやコメントなど) を無視します。E2E1E2

この場合、次のように要素を並べ替える必要があります。

<div id="container">
    <div id="sidebar"> This is the sidebar </div>
    <div id="content-area"> This is the content. </div>
</div>

または、ブロック フォーマット コンテキストを確立することで、コンテンツ領域がフローティング サイドバーのマージン ボックスと重ならないようにすることもできます。

CSS レベル 2 仕様書:

表のボーダーボックス、ブロックレベルで置換された要素、または新しいブロック整形コンテキストを確立する通常の流れの要素 ( 'visible' 以外の 'overflow'を持つ要素など) は、要素自体と同じブロック フォーマット コンテキスト内の任意のフロート。

したがって、コンテンツ領域に(たとえば)overflow-xの値を持つプロパティを指定すると、右側にフロートするサイドバーの左側に縮小されます。hidden

例はこちら

#content-area { overflow-x: hidden; }
#sidebar { float: right; width: 200px; }
于 2013-08-10T07:50:36.793 に答える