0 
<div id="wrapper">
  <div id="header">...</div>
  <div id="main">
    <div id="content">...</div>
    <div id="sidebar">...</div>
  </div>
</div>

#wrapper { min-width: 900px; }
#main { display: table-row; }
#content { display: table-cell; }
#sidebar { display: table-cell; width: 250px; }

問題は、サイドバーが常にページの右端にあるとは限らないことです (の幅によって異なります#content)。の幅は (ウィンドウの幅に応じて) 可変であるため#content、サイドバーが常にその親の右端にあるようにするにはどうすればよいですか?

例：

これが私が今持っているものです：

<---  variable window width   ---->
 ---------------------------------
| (header)                        |
 ---------------------------------
 [content]  | [sidebar] |
            |           |
            |           |
            |           |
            |           |
            |           |
            |           |

そして、ここに私が欲しいものがあります:

<---  variable window width   ---->
 ---------------------------------
| (header)                        |
 ---------------------------------
 [content]           | [sidebar] |
                     |           |
                     |           |
                     |           |
                     |           |
                     |           |
                     |           |

この問題を解決するためにさらに情報が必要な場合はお知らせください。ありがとう！

PS - フロートでこれを簡単に達成できることはわかっています。CSS テーブルを使用するソリューションを探しています。

解決：

#wrapper { min-width: 900px; }
#main { display: table; table-layout: fixed; }
#content { display: table-cell; }
#sidebar { display: table-cell; width: 250px; }

匿名のテーブル要素table-rowのおかげで、要素を宣言する必要はありません。

4

2 に答える 2

2

他のテーブル表示タイプが意味を持つようにするには、ラッパー div でスタイルdisplay: table(または)を設定する必要があります。テーブルではないものの中に行を入れるとどうなるかは未定義です。inline-table#main

次に、そのラッパーでtable-layout: fixed;、ブラウザが実際に指定した幅を尊重するように設定する必要があります（明示的な列がない場合は、最初のテーブル行で）。そうしないと、自動テーブル レイアウト アルゴリズムが二番目に推測してしまいます。最後にwidth: 100%;、収縮を避けるために追加します。

CSS テーブルを使用するソリューションを探しています。

それには何らかの理由がありますか、それともこれは単なる演習ですか？CSS テーブルは、ブラウザのサポートが不十分なため、今日では良い選択ではありません。最終的には、テーブルを使用するだけでは何も得られません。CSS ポジショニングは、このような単純なレイアウトに適した方法のようです。

于 2010-04-13T16:51:30.647 に答える
-1

親を position:relative に設定します。次に、サイドバーを position:absolute に設定し、右にぴったり合わせます。

そう....

#main{
position:relative;
}

#sidebar{
position:absolute;
right:0px;
}

これにより、コンテンツの幅に関係なく、サイドバーがメインの右側にぴったりと収まります。

于 2010-04-13T16:49:14.500 に答える