web-dev-qa-db-ja.com

2つのdivのフローティングコンテンツが重複しないようにするにはどうすればよいですか？

FAQページで、次の構造のページを作成しようとしています。

<section id="container">

     <div id="faq_primary"></div>
     <div id="faq_sidebar"></div>

</section>

<footer>

     <div id="directory">

          <div id="col_a"></div>
          <div id="col_b"></div>
          <div id="col_c"></div>

     </div>

</footer>

関連するCSSは次のとおりです。

#container {
    width:960px;
    margin: 0px auto;
    position:relative;
}

#faq_primary {
    width:720px;
    margin:20px 40px 0 0;
    position:relative;
    float:left;
    display:inline; 
}

#faq_sidebar {
    left:760px;
    position:absolute;
}

footer {
    width:1111px;
    height:250px;
    margin:90px auto 0px;
    position:relative;
    background-image:url(../images/footer/bg.png);
    color:#7d7d7d;
}

#directory {
    width:960px;
    margin:0px auto;
    padding-top:25px;
    font-size:13px;
}

#directory ul li{
    padding-bottom:4px;
}

#dir-cola, #dir-colb, #dir-colc, #dir-cold, #dir-cole {
    width:174px;
    height:140px;
    float:left;
}

#dir-cola {
    width:150px;
}

#dir-cole {
    width:143px;
}

私のページのコンテンツはセクションcontainerにあり、フッターはすぐ下にあります。 faq_sidebarはfaq_primaryよりもはるかに短く、フッターの列はすべて左に浮いているため、faq_primaryの右側、faq_sidebarの下になります。

これがスクリーンショットです： http://i.stack.imgur.com/I1vts.png

フッターとコンテナーのコンテンツが重複しないようにするためのアドバイスはありますか？

csshtmlcss-floatoverlap
9
Seo

私がこれを試したときと同じコンテンツを取得せずに知るのは難しいですが、スクリーンショットと同じものを作成することはできません。 （内容の違いによる）。

しかし、私はあなたが：

#container
{
    // ... *snip*
    overflow: hidden;
}

コンテナは、高さの計算にフロートされた子を含めます。

また、シドバーを変更することをお勧めしますleft: ...からright: 0右側に配置しようとしている場合（またはfloat: rightは絶対位置の代わりに正しいかもしれません）。

編集：-関連する質問の1つが同じ答えを持っていることに気づき、これが重複していることを示唆する傾向があるかもしれません。質問： 外側のdivを自動的にフローティングコンテンツと同じ高さにします

7
James Khoury

clearing divここに追加できます

<div id="faq_sidebar"></div>

<div class="clear"></div>

</section>

そして、このようにスタイルを設定します

.clear{
    clear:both;
}

それでも問題が解決しない場合は、</section>の後に追加する必要があります。

6
Jason Gennaro
clear:both;
clear:left;
clear:right;

前のdivまたは画像の右側または左側を調整するために画像に移動することを調整および回避するために使用されるプロパティがあります。

1
Saran

削除する left:760px; from #faq_sidebar。

0
Sonal Khunt

これがコンテナ内にある場合：

<section id="container">

<div id="faq_primary"></div>

<div id="faq_sidebar"></div>

</section>

そして、それらをインラインでレイアウトしたいのですが、＃containerをdisplay：inlineでスタイル設定しないのはなぜですか。 #faq_sidebarに絶対配置を使用しているため、フッターのコンテンツが重複している可能性があります

0
Andrew Briggs