我有浮动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代码......
提前感谢...
答案 0 :(得分:0)
.class1 .class2
导致问题IE6
尝试使用#id1 .class1
这些地方 .r-cont .r-cont-content
答案 1 :(得分:0)
我认为你的问题是所谓的'折叠父母',即容器div不如内容中的内容高。
如果这是您的问题,那么有四种解决方案。我建议将.mcontent div的溢出值更改为隐藏(来自可见)。此解决方案与IE6兼容,因为您已设置父级的宽度。
.mcontent {overflow: hidden;}
请阅读以下链接中的“修复折叠父母”部分以获取更多信息(以及其他三种解决方案):
http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/