左の列は幅が広い必要があります

私は単純な2列のレイアウトでWebページを作成しようとしています。左の列は目次などで、右の列は実際の内容です。私がこれまで見てきたすべての例は、左列幅をピクセル単位で固定していますが、これは明らかに理想的ではありません。 CSSで「左の列を幅広く、右の列は残りの領域を取るようにする」と言ってもいいでしょうか？左の列は幅が広い必要があります

出典

2012-05-01 rwallace

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

出典

2012-05-01 13:34:55

左の列の幅をパーセンテージで指定することができ、同じことが右の列にも適用されます。たとえば、

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

出典

2012-05-01 13:37:04 Lodder

左の列の内容が親の30％を超えている場合は、 OPはフレキシブルな左欄を必要とするため、コンテンツが15％しか使用されない場合、その欄はわずか15％の幅になります。流動性のレイアウトではなく、まだ固定の幅（ブラウザのウィンドウに関係しています）でも、 –

左に浮動するようにナビゲーションを設定する必要があります。サイジングは自動的に行われます。

HTML：

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

CSS：

div.nav { 
    float:left; 
}

出典

2012-05-01 13:38:28 jncraton

はすべてのフロートの後にフロートをクリアするようにしてください。そうしないと、レイアウトに問題が発生します。 –

しかし、これは、ナビゲーションテキストの最後を過ぎてすぐに本文テキストを画面の全幅に戻します。ナビゲーション列が無限に長いように、本文テキストを元の幅内にとどめさせるにはどうすればよいですか？ – rwallace

私は他の回答がしたように、あるタイプの幅を指定せずにこれを行う方法を知らない。 – jncraton

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

出典

2012-05-01 13:38:36 Chandrakant

これはまだピクセルでハードワイヤリングされていますが、これは私のマシン上で大丈夫なものを作成するのに最適な方法で、フォントや画面の解像度や他に何か考えていないマシンではひどいものです。 – rwallace

はい、私はちょうど例として与えました、私たちはPXの代わりに％を使うことができました – Chandrakant

これはあなたのHTML

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

そして、あなたのCSS

ください

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

余白や余白を追加して、両者の間に少しのスペースを入れることができます。

これは流体レイアウトに必要なすべてです。

EDIT：一方が他方の下に表示された場合は、左と右のクラスごとに

display:inline-block;

を追加します。

出典

2012-05-01 16:24:49

インラインブロックを追加しても、右側の分割が左側の分割の下に表示されます。 – rwallace

両方の列の幅とそのパディングと余白がページ幅の100％以上にhpを追加するようです。表示するコードはありますか？ –

左の列は幅が広い必要があります

答えて

関連する問題