0

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

4

5 に答える 5

2

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

于 2012-05-01T13:34:55.667 に答える
1
.left_col{min-width: 10px;} 
.right_col{max-width: 20px;}
于 2012-05-01T13:38:36.620 に答える
0

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

left_column { width: 30% }
right_column: { width: 70%}
于 2012-05-01T13:37:04.263 に答える
0

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

HTML:

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

CSS:

div.nav {
    float:left;
}
于 2012-05-01T13:38:28.927 に答える
0

これを 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;

左右のクラスごとに。

于 2012-05-01T16:24:49.387 に答える