2012-05-13 10 views
5
<div style="width: 800px; height: 600px"> 

    <div style="float:left; width: 100px"> 
     left fixed-width column 
    </div> 
    <div style="???"> 
     right stretching column (the width should be 700px in this case.) 
    </div> 

</div> 

左のものが固定サイズで、右のものが伸びる2つの列レイアウトを作成する標準的な方法はありますか?HTML CSS:修正とストレッチ幅2列のレイアウト

  • 私は両方の列のスタイルが独立していると思います。私はここでいくつかの解決策を見つけましたが、左の列の幅を変更すると、右の列のスタイル(マージンなど)も一緒に変更する必要があります。

  • 古いブラウザをサポートする必要はありません。それが標準であれば大丈夫です。

答えて

2

overflow: hiddenを2番目のdivに適用します。新しいblock formatting contextが導入されます。詳細はCan overflow:hidden affect layout?でご覧いただけます。その後、最初の列の幅を設定し、作るために2列目絶対位置を使用する - あなたはまた、両方の列をラップ(とあなたが好きならば、ブロックとして、それらを中央)するdiv要素を使用することができます

jsFiddle Demo

+0

シンプルでエレガントなソリューション! – user1392013

+0

@ user1392013満足していれば、私の答えの左側にある目盛りで私の答えを受け入れることができます。 – kapa

+0

**オーバーフローの設定には注意が必要です。隠し** ...これは、割り当てられた領域を超えてコンテンツが隠れることを覚えておいてください!固定量のコンテンツを持っている場合でも、フォントサイズなど、レイアウトに影響する可能性のある特定のブラウザ表示をユーザーが制御できます。ユーザーがより快適な閲覧のためにフォントサイズを増やした場合、右側のdivのコンテンツが割り当てられたスペースよりも大きくなり、「オーバーフロー:非表示」はそのユーザーには表示されません。変更する追加のCSS値のために顧客を疎遠にする価値がありますか? – FluffyKitten

0

その左端の境界は最初の列の端であり、その右端はラッパーの端である。

<div style="width:auto; min-width:500px; margin:30px; position:relative; top:0px;"> 

<div style="width:100px; height:100px; padding:15px; background-color:aqua;"> 
</div> 

<div style="height:100px; padding:15px; position:absolute; top:0px; left:100px; right:0px; background-color:blue;"> 
</div> 

</div> 

JSFiddle

関連する問題