從div和css構建的對話框不能正確佈局

我有一個對話框顯示不正確，但我找不出原因。該對話框由幾個div組成。從div和css構建的對話框不能正確佈局

該對話框由父級div組成，該父級div包含標題，正文和頁腳的三個子div。每個子div進一步分爲左，中，右三個子子div。我無法弄清楚爲什麼我的左腳底部子分區出現在右側主體底部分區右側。

我簡化了下面的html，所以結構很清晰。

<div class="dialog"> 
    <div class="titlebar"> 
    <div class="titlebarleft"> 
    </div> 
    <div class="titlebarcenter"> 
    </div> 
    <div class="titlebarright"> 
    </div> 
    </div> 
    <div class="con"> 
    <div class="conleft"> 
    </div> 
    <div class="concenter"> 
    </div> 
    <div class="conright"> 
    </div> 
    </div> 
    <div class="footer"> 
    <div class="footerleft"> 
    </div> 
    <div class="footercenter"> 
    </div> 
    <div class="footerright"> 
    </div> 
    </div> 
</div>

大多數CSS的與每個3個主要部分（標題欄，身體，頁腳）的相同

名稱：

.titlebar { 
    height: 38px; 
    width: 100%; 
}

內容：

.con { 
    background: url("../images/dialog/vertical.png") repeat-y scroll 0 0 #FFFFFF; 
    font-family: Tahoma,"Lucida Grande",Verdana,Arial,Helvetica,sans-serif; 
    font-size: 11px; 
    width: 100%; 
}

頁腳：

.footer { 
    font-family: Tahoma,"Lucida Grande",Verdana,Arial,Helvetica,sans-serif; 
    font-size: 11px; 
    height: 37px; 
    width: 100%; 
}

這裏的左頁腳CSS：

.footerleft { 
    background: url("../images/dialog/static.png") no-repeat scroll 0 -83px transparent; 
    float: left; 
    height: 100%; 
    width: 9px; 
}

這裏的問題的一個畫面：http://s9.postimage.org/ebj6w7ynj/Dialog_Corner.jpg

來源

2013-01-11 Legion

添加明確：對您的.footer風格。如果你給我們jsfiddle演示會更好。 –

工作。讓它成爲答案，我會標記它解決了。 – Legion

+1爲jfiddle，另外，我不知道我完全理解你的問題。當我測試代碼時，footerleft實際上被放置在頁腳的左側？看看這裏http://jsfiddle.net/GGM8u/ – rusty009

所有div元素是顯示：內聯。所以如果你在div元素後面寫一個div，父元素的寬度會將div分隔到新行（只要兩個div寬度大於父寬度）。現在你可以設置清除：這兩個（浮動）爲.footer類在這個元素之前斷行。

.footer { 
    font-family: Tahoma,"Lucida Grande",Verdana,Arial,Helvetica,sans-serif; 
    font-size: 11px; 
    height: 37px; 
    width: 100%; 
    clear:both; 
}

但我不確定適用於所有瀏覽器。

來源

2013-01-11 21:06:20

從div和css構建的對話框不能正確佈局

回答

相關問題