2010-10-26 108 views
0

我有一個浮動div問題。我嘗試了一切,我搜索無處不在,但我不能找到(也許我使用錯誤的關鍵詞進行搜索,我不知道)CSS浮動問題

這裏是代碼:

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

在這裏,我們去...

如果。內容的含量越少,然後。內容偏右,.mcontent的高度等於m.content的最小高度,所以我沒有設置它。它等於.mcontent的填充頂部和底部。被遺漏的地區沒有任何背景。我不能設置.mbody背景,因爲我用JavaScript四捨五入的角落,如果我使用背景角落的外部有.body的顏色...

我的客戶仍然使用ie6,所以我不能任何css效果和css3代碼...

在此先感謝...

+0

我不明白你的問題。你是否有一個?我爲你創作了一個小提琴:http://www.jsfiddle.net/CJMDs/ – 2010-10-26 07:11:36

回答

0

.class1 .class2IE6導致問題嘗試使用#id1 .class1像這些地方.R-CONT .R-CONT內容

0

我覺得你問題就是所謂的「倒塌」如果這是你的問題,那麼有四種解決方案。如果這是你的問題,那麼有四種解決方案。我會建議將您的.mcontent div的溢出值更改爲隱藏(從可見)。此解決方案與IE6兼容,因爲您已設置父級的寬度。

.mcontent {overflow: hidden;} 

閱讀節「修復倒塌的父母」,在下面的鏈接瞭解更多信息(以及其他三個解決方案):

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