3 列ドロップ問題_html/css_WEB-ITnose

DIV があり、それを 3 つの列に分割したいと考えています。

ボディ,ul,p,h1,h2,h3,h4,dl,dd,form ,input,textarea,select { パディング:0; フォントファミリー:arial; }
#top { 幅:1000px; ボーダー:1px } .left_nav { 幅:404px; 高さ:222px; ボーダー:1px; 余白:0 自動;
; height:222px; float:right; border:1px plain green;

しかし、最後の列: right_nav は常に次の行にあり、同じ列に置くことはできません。




ディスカッションへの返信 (解決策)

兄弟、3 つの div: .left_nav、.logo、および .right_nav の幅の合計が 1000px に達しました。 。 1pxの枠線も設定しているのですが、幅を超えてバラバラになってしまうことはありませんか？ ！ ！

1000PX を 1100PX に設定しましたが、3 番目の列がまだ表示されません。

.logo には float がないため、収まるかどうかに関係なく、次の .right_nav は新しい行で始まります

1. ロゴの幅を指定しないと、ロゴの残りの幅が自動的に埋められます。 left_nav と right_nav

2. ロゴは right_nav の後に記述する必要があります

理由:

left_nav には float:left があり、ドキュメント フローを離れて左側にフロートします

right_nav には float:right があり、ドキュメント フローを離れて右側にフロートします

ロゴはfloat属性を持たないので通常のドキュメントフロー位置を占めますが、floating divにより左右がはみ出してしまいます


上階の方アドバイスありがとうございます

このウェブサイトの声明

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