<!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>
以上代碼顯示的結果如下,很正常,結果相同。
下面會在這個基礎上進行修改,修改的內容都在style中,其他代碼就不再重複寫了。
請 注意,這裏的Style中用到了min-height,這個和height是不同的,min-height指定了對象的一個最小高度,當對象的子內容高度 超過這個最小高度是,這個對象會自動撐大。這是一個非常牛的style,可惜的是,在這個style和float這個同樣牛的style一起使用的時候, 就會出現各種問題。
內部一個Div修改成爲float:left
.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; }
顯示結果如下。
這個結果中,Firefox有點離譜了,兩個框疊在一起也就罷了,爲什麼那個紅框會變大捏?而且變的大小也很詭異,不知道是按照什麼公式計算出來的。IE在這裏的顯示應當是附和標準的。
內部兩個Div都修改成爲float:left
.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; }
顯示結果如下。
在這種情況下,Firefox的結果尚能解釋,可能是float把外層的Div也作爲內層float影響的範圍,這樣內層的就不會將外層的Div撐大了。IE在這裏出現了Margin失效的情況,可以解釋爲內層第二個float造成了影響。
乾脆把外層的Div也修改成爲float:left
.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; }
顯示結果如下,
這種情況下,Firefox正常了,而IE延續了前面的不正常情況。
外層是float:left,內層最後一個不再float:left
.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的情況相同。
結論
再重申一次,本文討論的是一個比較高級的話題。如果在style中用height而不是min-height來設定高度,是不會出現以上這些問題的。不過,不用min-height就失去了div自動撐大這一個很有必要的特性。
在min-height和float:left的情況下,沒有一種完美的寫法讓Firefox和IE結果相同。不過仍然可以發現繞開的方法。
進一步試驗可以發現,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; }
顯示結果如下,
呵呵,總算是一樣了,雖然是湊合着一樣了。幸好一樣了,否則只好用table了。
當然所有這些情況也許是有合理解釋的,說不定增加某一個style的設置,這些問題都迎刃而解了,不過目前我還沒有找到這個設置。
關於Doctype
以上代碼在下面這些Doctype下試驗過,結果相同。
<!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">