css float/positioniong

所以我有一個邊框的小div，和三個div（請參見結束圖）。綠色是全尺寸（減去填充等）;藍色應該向左浮動並具有特定的寬度;紅色應該是正確的，並且具有特定的寬度。但是我搞砸了。藍色和紅色的div都浮在主div之外。我在這裏做錯了什麼？css float/positioniong

這裏是我當前的代碼：

<div style="border: 2px solid black; width: 630px;"> 
    <div style="width:auto;">Lorem ipsum</div> 
    <div style="width:150px; float:left;">This is the blue box</div> 
    <div style="width:150px; float:right;">This is the red box</div> 
</div>

花車

Ideal Float http://www.mfrl.org/images/howtofloat.png

來源

2010-07-12 aslum

對於我來說，哪種瀏覽器似乎可以正常工作？嘗試將樣式移動到外部樣式表中。從長遠來看，將會爲你節省很多心痛:) – RyanP13 2010-07-12 19:15:31

我在主分區之外沒有看到它們（Chrome和IE） – onof 2010-07-12 19:15:38

它現在可以在IE瀏覽器中工作，但我沒有在Chrome或Firefox中檢查過。。 – aslum 2010-07-12 19:19:30

定位是滑稽。基本上，主要分區在計算自身高度時沒有考慮浮動元素的高度。解決這個問題的最簡單方法是在浮動元素之後添加一個清除元素。

這撥弄應明確交待：http://jsfiddle.net/QQxb3/2/

我覺得誰對您的文章發表意見的人說，它的工作一定誤解了你所說的「主要格」的意思，因爲規範，Chrome並遵循IE在這個特定的例子中，將浮動元素置於其父div之外。

來源

2010-07-12 19:23:08

謝謝，那正是問題所在。 – aslum 2010-07-12 19:26:01

將不需要使用清除分區。溢出：用IE的hasLayout觸發器隱藏就足夠了，很整潔。 – RyanP13 2010-07-12 19:33:51

RyanP13的評論是正確的。請參閱http://jsfiddle.net/QQxb3/5/。我從來不知道這件事，並且認爲它比我的更令人滿意。 – 2010-07-12 19:53:27

css float/positioniong

回答

相關問題