如何防止兩個div中的浮動內容重疊？

在FAQ頁面我試圖讓我有一個頁面，這個結構：如何防止兩個div中的浮動內容重疊？

<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_sidebar下方的faq_primary右側。

以下是截圖：

任何意見，這樣我就可以防止重疊在頁腳的內容和容器？

來源

2011-09-26 Seo

你可以添加一個結算DIV這裏

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

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

</section>

，然後風格像這樣

.clear{ 
    clear:both; 
}

如果不這樣做，你可能需要將其在</section>之後添加

來源

2011-09-26 02:57:27

很有創意:) – 2017-01-04 13:57:32

如果這是在一個容器中：

<section id="container"> 

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

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

</section>

並且您希望它們內聯佈置，爲什麼不使用樣式#container with display：inline。你正在使用#faq_sidebar的絕對定位，這可能是爲什麼頁腳內容重疊

來源

2011-09-26 03:01:56

很難知道沒有獲得相同的內容，當我嘗試這個我不能產生相同的截圖。（由於內容的不同）。

但我敢肯定，如果你：

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

會導致容器包括在其計算高度漂浮的孩子。

此外，我建議你改變sidbar left: ...到right: 0如果你是在正確的試圖P [osition它（或者float: right可能是正確的，而不是絕對定位）。

編輯： -我注意到有一個相關的問題有相同的答案，我可能傾向於建議這是重複的。問：Make outer div be automatically the same height as its floating content

來源

2011-09-26 03:08:07

非常感謝你，工作！我將來會記住這一點。我將它定位爲絕對的，因爲我之後將它與jQuery做成了一個粘性邊欄。 – Seo

這真的幫了我很多，非常感謝！ – TheOptimusPrimus

clear:both; 
clear:left; 
clear:right;

有用來調節和避免去圖像調整到右側或前一格或圖像左側的屬性。

來源

2011-10-13 18:18:58 Saran

從#faq_sidebar刪除left:760px;。

來源

2011-11-09 13:37:04

如何防止兩個div中的浮動內容重疊？

回答

相關問題