<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Div Float Sample</title>
<style type="text/css">
div { margin:3px; }
.d1 { width:250px; min-height:20px; border:1px solid #00cc00; }
.d2 { width:130px; min-height:40px; border:1px solid #0000cc; }
.d3 { width:100px; min-height:40px; border:1px solid #cc0000; }
</style>
</head>
<body>
<div class="d1">
<div class="d2"> </div>
<div class="d3"> </div>
</div>
</body>
</html>
以上代碼顯示的結(jié)果如下，很正常，結(jié)果相同。
下面會(huì)在這個(gè)基礎(chǔ)上進(jìn)行修改，修改的內(nèi)容都在style中，其他代碼就不再重復(fù)寫了。
請(qǐng)注意，這里的Style中用到了min-height，這個(gè)和height是不同的，min-height指定了對(duì)象的一個(gè)最小高度，當(dāng)對(duì)象的子內(nèi)容高度超過這個(gè)最小高度是，這個(gè)對(duì)象會(huì)自動(dòng)撐大。這是一個(gè)非常牛的style，可惜的是，在這個(gè)style和float這個(gè)同樣牛的style一起使用的時(shí)候，就會(huì)出現(xiàn)各種問題。
.d1 { width:250px; min-height:20px; border:1px solid #00cc00; }
.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; }
.d3 { width:100px; min-height:40px; border:1px solid #cc0000; }
顯示結(jié)果如下。
這個(gè)結(jié)果中，F(xiàn)irefox有點(diǎn)離譜了，兩個(gè)框疊在一起也就罷了，為什么那個(gè)紅框會(huì)變大捏？而且變的大小也很詭異，不知道是按照什么公式計(jì)算出來的。IE在這里的顯示應(yīng)當(dāng)是附和標(biāo)準(zhǔn)的。
.d1 { width:250px; min-height:20px; border:1px solid #00cc00; }
.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; }
.d3 { width:100px; min-height:40px; border:1px solid #cc0000; float: left; }
顯示結(jié)果如下。
在這種情況下，F(xiàn)irefox的結(jié)果尚能解釋，可能是float把外層的Div也作為內(nèi)層float影響的范圍，這樣內(nèi)層的就不會(huì)將外層的Div撐大了。IE在這里出現(xiàn)了Margin失效的情況，可以解釋為內(nèi)層第二個(gè)float造成了影響。
.d1 { width:250px; min-height:20px; border:1px solid #00cc00; float: left; }
.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; }
.d3 { width:100px; min-height:40px; border:1px solid #cc0000; float: left; }
顯示結(jié)果如下，
這種情況下，F(xiàn)irefox正常了，而IE延續(xù)了前面的不正常情況。
.d1 { width:250px; min-height:20px; border:1px solid #00cc00; float: left; }
.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; }
.d3 { width:100px; min-height:40px; border:1px solid #cc0000; }
顯示結(jié)果如下，
這和前面第一種加float:left的情況相同。
再重申一次，本文討論的是一個(gè)比較高級(jí)的話題。如果在style中用height而不是min-height來設(shè)定高度，是不會(huì)出現(xiàn)以上這些問題的。不過，不用min-height就失去了div自動(dòng)撐大這一個(gè)很有必要的特性。
在min-height和float:left的情況下，沒有一種完美的寫法讓Firefox和IE結(jié)果相同。不過仍然可以發(fā)現(xiàn)繞開的方法。
進(jìn)一步試驗(yàn)可以發(fā)現(xiàn)，margin遭到的影響在padding上比較好，所以最好是padding和margin都不用，或者只用padding。
兩者相同的代碼如下，
div { padding:3px; }
.d1 { width:250px; min-height:20px; border:1px solid #00cc00; float: left; }
.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; }
.d3 { width:100px; min-height:40px; border:1px solid #cc0000; float: left; }
顯示結(jié)果如下，
呵呵，總算是一樣了，雖然是湊合著一樣了。幸好一樣了，否則只好用table了。
當(dāng)然所有這些情況也許是有合理解釋的，說不定增加某一個(gè)style的設(shè)置，這些問題都迎刃而解了，不過目前我還沒有找到這個(gè)設(shè)置。
以上代碼在下面這些Doctype下試驗(yàn)過，結(jié)果相同。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
聯(lián)系客服
