Question

我有浮动div的问题。我尝试了一切，我到处搜索，但我找不到（也许我使用错误的关键字搜索，我不知道）

这是代码：

<div class="mbody">
<div class="mheader"> header content </div>
<div class="mmenu"> menu content </div>
<div class="mcontent">
   <div class="content-right">
   <div class="r-cont">
      <div class="r-cont-header"> header goes here </div>
      <div class="r-cont-content"> <p>• There is a sample right content...</p></div>
   </div>
   </div>
   <div class="content"> contents goes here </div>
</div> <!-- mcontent ends here -->
<div class="mfooter"> footer content </div>
</div> <!-- mbody ends here -->

这里有css代码：

.mbody {
    clear: both;
    width: 920px;
    position: relative;
    overflow: visible;
    height: auto;
    margin: 0px auto;
}
.mheader {
    height: 163px;
    width: 856px;
    background-image: url(img/header.png);
    padding: 32px;
}
.mmenu {
    height: 40px;
    width: 920px;
    background-image: url(img/menu-bg.png);
}
.mcontent {
    width: 880px;
    overflow: visible;
    padding: 20px;
    height: auto;
    background-color: #FFF;
    clear: both;
}
.content-right {
    width: 200px;
    float: right;
}
.content {
    margin-right: 220px;
}
.r-cont {
    clear: both;
    width: 200px;
}
.r-cont .r-cont-header {
    background-image: url(img/menu-head.png);
    height: 32px;
    width: 168px;
    line-height: 32px;
    color: #FFF;
    padding-left: 32px;
    font-weight: bold;
    font-size: 16px;
}
.r-cont .r-cont-content {
    background-color: #F8AF6B;
    font-size: 12px;
    padding: 6px;
}
.mfooter {
    height: 60px;
    width: 920px;
    background-color: #F58220;
    background-image: url(img/footer-bg.png);
    clear: both;
}

我们走了......

如果.content的内容小于.content-right，。mcontent的高度等于m.content的min-height，所以我没有设置它。它等于.mcontent的填充顶部和底部。遗漏区域没有任何背景。我无法设置.mbody背景，因为我使用JavaScript使用圆角，如果我使用背景角，则外面的颜色为.mbody ......

我的客户仍然使用ie6，所以我不能使用任何css效果和css3代码......

提前感谢...

Answer 1

.class1 .class2导致问题IE6尝试使用#id1 .class1这些地方 .r-cont .r-cont-content

Answer 2

我认为你的问题是所谓的'折叠父母'，即容器div不如内容中的内容高。

如果这是您的问题，那么有四种解决方案。我建议将.mcontent div的溢出值更改为隐藏（来自可见）。此解决方案与IE6兼容，因为您已设置父级的宽度。

.mcontent {overflow: hidden;}

请阅读以下链接中的“修复折叠父母”部分以获取更多信息（以及其他三种解决方案）：

http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/

CSS浮动问题

2 个答案: