【】1つのDIV内に2つのDIVを並べて配置します。右側の div のサイズは可変です。 _html/css_WEB-ITnose

写真に示すように:
頭部が div で、左側に画像、右側に背景色 (画像の右側と同じ色) がある Web ページを作成したいです。 , ブラウザのサイズに応じて x を繰り返します。
以下は、左と右という 2 つの div でネストされた #middle div です。左の幅は 200 ピクセルで、右の右端は頭の右端と一致する必要があります。

問題は、右側のものが常に狭く、ページ サイズに適応できないことですか? ? ?

ディスカッションに返信（解決策）

右側の div に div を追加し、内部クラスを追加します

div1{float:left;position:relative;margin-right:-200px;}div2{float:right;width:100%;}div2 .inner{margin-left:200px;}

http://jsfiddle.net/jikeytang/b75z9/2/
インターネット速度早速ですが、開いて見てください。

2L に戻って margin-right:-200px; を追加すると、左側が消えます

「問題は、右側が常に狭くなり、ページ サイズに適応できないことです。???」
左側の幅が固定されている場合、右側は共通コンテナの残りの幅を埋め、ページの幅に応じて調整する必要があります。ページ幅が小さい場合、右側が非常に狭くなります。ページ幅が小さいときに右 div が狭すぎないようにするには、右 div の min-width を定義するか、レスポンシブ レイアウトのメディア クエリを使用して、右または左 div を 1 行ではなく垂直に表示します。 。
以下は単純な 2 列レイアウトの例です。
8b05045a5be5764f313ed5b9168a17e6
93f0f5c25f18dab9d176bd4f6de5d30e
ac68354c044cd3b4f516b0952e480cfd
html, body, div { margin: 0; }
div { height: 400px; }
#divRight { 背景: 青; : 緑 ; マージン左: 200px }
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
1b4b7b51250a397e525e2375377b7b14 ; / div> 左側と右側が等しく、高さも同じです

DWcs5 を使用して 2 行 2 列のテーブルを挿入することもできます