0

私が抱えている問題は、ページの上部に 2 つの div があり、1 つには繰り返しの青い背景が含まれ、もう 1 つには背景画像が含まれていることです。

両方の div を垂直方向に拡張するには、両方の div の高さを設定する必要があります。コンテンツと共に拡張しないでください。右側にそのフォームがオーバーフローするように設定されています。それが問題の原因だと私は信じています。

コードに高さ css を含めないようにしましたが、それでも垂直方向に拡張しません。

背景が表示されるようにするには、高さを手動で設定する必要があります。

これはページです: http://www.repipespecialists.com/landing/google/repiping.html

これはCSSコードです：

#top_container {
    width:100%;
    height:1040px;
    background-image:url(../images/top_bg_repeat.jpg);
    background-repeat:repeat-x;
    background-color:#83b4e9;
}

#top_header {
    width:1200px;
    height:1040px;
    background-image:url(../images/header_bg.jpg);
    background-repeat:no-repeat;
    background-color:#83b4e9;
    margin: 0 auto;
}
4

2 に答える 2

1

あなたが抱えている問題は、and要素のfloat: leftandの使用によるものであるという点で、WDan に同意します。float: rightleft_contentright_content div

float要素で使用すると、基本的にドキュメントの通常の流れから削除されます。デフォルトでは、マークアップで指定した順序で要素がページに表示されます。float(または のようなもの) を使用position: absoluteすると、この「順序」または「ドキュメント フロー」から要素が削除され、他の要素をページ上のデフォルト位置に配置するときにフロート要素が無視されます。

これらの浮動要素によって使用されるスペースは無視されるため、top_header divは自身のサイズを決定するときに浮動要素のサイズを考慮しません。これが、div が自動的に展開されない理由です。

の別の代替手段floatは、 を使用することdisplay: inline-blockです。違いの詳細については、次のリンクを参照してください。

于 2012-07-24T02:18:15.533 に答える
0

問題は、「left_content」と「right_content」でフロートを使用していることだと思います

ラッパー div で「overflow: hidden」を使用します。

于 2012-07-24T01:31:02.850 に答える