html - 必要な幅の左側の列

Question

シンプルな 2 列のレイアウトで Web ページを作成しようとしています。左の列は目次などで、右の列は実際のコンテンツです。これまで見てきたすべての例では、左側の列幅をピクセル単位で固定していますが、これは明らかに理想的ではありません。CSSで「左の列を必要なだけ広くし、右の列は残りのスペースを取る」と言う推奨される方法は何ですか?

Answer 1

fixed を指定しないでくださいwidth。最小幅または最大幅を制御する場合は、それぞれ および を使用min-widthしmax-widthます。

Answer 2

.left_col{min-width: 10px;} 
.right_col{max-width: 20px;}

Answer 3

パーセンテージを使用して左側の列の幅を指定できます。右側の列も同じです。例えば：

left_column { width: 30% }
right_column: { width: 70%}

Answer 4

ナビゲーションを左にフロートするように設定するだけです。サイジングは自動的に行われます。

HTML:

<div class="nav">Navigation</div>
<div class="content">Body Text</div>

CSS:

div.nav {
    float:left;
}

Answer 5

これを HTML にします

<div class="left">Left Div</div>
<div class="right">Right Div</div>

そしてあなたのCSS

.left {float:left; width:auto;}
.right {float:right; width:auto;}

マージンやパディングを追加して、2 つの間に少しスペースを空けることができます。

流動的なレイアウトに必要なのはこれだけです。

編集：一方が他方の下に表示される場合は追加

display:inline-block;

左右のクラスごとに。