jquery - 連続する固定長の 2 つの div のレスポンシブ レイアウト

Question

• 私は2つのdivを持っています
• 固定幅 20px のもの。
• 2 番目の div で、親コンテナーの残りの幅をすべて取得したい
• 親コンテナのピクセル単位の幅がわかりません。「%s」にあります

どうすればこれを達成できますか?

Answer 1

2 番目の div の幅を作成する100%かauto、マージンを介して最初の div の幅を削除します。作業例: http://jsfiddle.net/dAryP/

Answer 2

これを試して：

HTML：

<div id='wrapper'>
    <div id='first'/>
       first
    </div>
    <div id='second'/>
       second
    </div>    
</div>

CSS：

#first {
   width: 20px;
   height:50px; // height is set for test
   background-color: red    
}

#second {
   height:50px;
   background-color: blue;
}

#wrapper div {
   float:left
}

JS：

$(window).resize(function(){
   var r = $('#wrapper').width() - 20;
   $('#second').width(r)
}).resize()

デモ

Answer 3

これを行うのに JavaScript は必要ありませんし、他の人が投稿していたほどの CSS も必要ありません。この男が必要とするものを非常に複雑にしています:

HTML

<div id='wrapper'>
    <div id='first'/>
       &nbsp;
     </div>
    <div id='second'/>
       second
     </div>    
</div>    

CSS

#first {
   width: 20px;
   float: left;
}

非フローティング div は、ページの残りの幅を想定します。

http://jsfiddle.net/thundercracker/MpPLr/28/