【】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 列レイアウトの例です。

; / div> 左側と右側が等しく、高さも同じです

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。