如何防止两个div中的浮动内容重叠？

发布于 2024-12-06 11:07:57 字数 1504 浏览 0 评论 0原文

在常见问题解答页面中，我试图使页面具有以下结构：

<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 的下方。

这是一个屏幕截图：

任何建议，以便我可以阻止其中的内容页脚和容器是否重叠？

原文

In a FAQ page I'm trying to make I have a page with this structure:

<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>

Here is the relevant 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;
}

My page content is found in the section container, and the footer is directly below. The faq_sidebar is much shorter than faq_primary, and because the columns in the footer are all floating left, they end up to the right of the faq_primary, below the faq_sidebar.

Here's a screenshot:

Any advice so I can prevent the content in the footer and container from overlapping?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

爱，才寂寞 2024-12-13 11:07:57

如果没有获得与我尝试此操作时相同的内容，则很难知道我无法生成与屏幕截图相同的内容。（由于内容不同）。

但我很确定您是否：

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

会导致容器在其高度计算中包含浮动的子项。

另外，如果您尝试将 sidbar left: ... 更改为 right: 0，如果您尝试将其放置在右侧（或者float: right 可能是正确的，而不是绝对定位）。

编辑：-我注意到其中一个相关问题有相同的答案，我可能倾向于认为这是重复的。问题：使外部 div 自动成为与其浮动内容高度相同

Its hard to know without getting the same content as when i try thhis i can't produce the same as the screenshot. (Due to differences in content).

But I'm pretty sure if you:

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

Will cause the container to include the floated children in its calculation for height.

Also I would suggest you change the sidbar left: ... to right: 0 if you are trying to p[osition it on the right (alternatively float: right might be correct instead of positioning absolute).

EDIT:- I noticed one of the related questions had the same answer and i might be inclined to suggest that this is a duplicate. Question: Make outer div be automatically the same height as its floating content

回复收藏 0 原文

舟遥客 2024-12-13 11:07:57

您可以在此处添加一个清除 div，

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

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

</section>

然后将其样式设置为这样。

.clear{
    clear:both;
}

如果这不起作用，您可能需要在之后添加它

You could add a clearing div here

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

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

</section>

and then style it like this

.clear{
    clear:both;
}

If that doesn't do it, you may need to add it after the </section>

回复收藏 0 原文

浮华 2024-12-13 11:07:57

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

有一些属性用于调节和避免去图像调整前一个 div 或图像的右侧或左侧。

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

There are the property used to regulate and avoid to go to the image into adjust right side or left side of a previous div or image.

回复收藏 0 原文

留一抹残留的笑 2024-12-13 11:07:57

如果这是在容器中：

<section id="container">

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

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

</section>

并且您希望它们内联布局，为什么不使用 display: inline 设置 #container 样式。您正在为 #faq_sidebar 使用绝对定位，这可能就是页脚内容重叠的原因

If this is in a container:

<section id="container">

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

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

</section>

and you want them laid out inline why not style #container with display: inline. You are using absolute positioning for #faq_sidebar and that might be why the footer content is overlapping

回复收藏 0 原文