如何防止两个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中的浮动内容重叠？

回答

相关问题