シンプルな 2 列のレイアウトで Web ページを作成しようとしています。左の列は目次などで、右の列は実際のコンテンツです。これまで見てきたすべての例では、左側の列幅をピクセル単位で固定していますが、これは明らかに理想的ではありません。CSSで「左の列を必要なだけ広くし、右の列は残りのスペースを取る」と言う推奨される方法は何ですか?
5 に答える
2
fixed を指定しないでくださいwidth
。最小幅または最大幅を制御する場合は、それぞれ および を使用min-width
しmax-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 に答える