漂浮不好嗎？什麼應該用在它的地方

我已經從表格設計跳到css，大約一週前，並且從那以後一直在閱讀更多的內容。昨天，我在SO上看到一個很長的帖子，那裏的海報正在敲花車，他們是如何貶值的。有很多關於inline-block正在使用的地方。漂浮不好嗎？什麼應該用在它的地方

我有一個HTML5設計，我剛剛完成，它在firefox和chrome中看起來棒極了，但是從運行explorer版本7,8和9的其他計算機進行測試時，絕對設計爆炸。它似乎對我來說，我已經漂浮在這個設計中的任何東西都不在IE中。它似乎包裹在它的左邊。

我想知道我是否可以使用花車，或者如果我應該使用inline-block來代替。如何使用inline-block將兩個div彼此相鄰，其中一個位於左側，另一個位於右側，這將是很好的例子。

我在這裏有另一個困境，希望有人可以幫助我。我在運行XP SP1的舊開發機器上。我可以測試的最好的IE瀏覽器是6.我想以某種方式獲得一些東西，這些東西可以讓我測試版本7,8和9（如果它還沒有的話，還有10個）。有人可以爲此推薦任何解決方案嗎？

來源

2012-03-19 Muzz

雖然根據[儀器法]（http://en.wikipedia.org/wiki/Law_of_the_instrument），可能會有更好的替代方法，但根本沒有棄用。請鏈接到您的來源。 – zzzzBov 2012-03-19 19:49:15

我會看看我能否找到它。 – Muzz 2012-03-19 19:50:51

固體閱讀在IE瀏覽器，以及它如何處理浮動元素：http://css-class.com/articles/explorer/floats/floatandcleartest1.htm – MetalFrog 2012-03-19 19:51:15

花車從來沒有打算進行佈局。

他們只是想要一個元素，把它放在一邊，讓其他內容流動它。就這樣。

那麼，我們爲什麼要使用它們進行佈局？

因爲你可以清除頁腳空兩列浮動，浮動佈局應運而生。如果有一種方法可以「清除」定位元素下方的元素，我們就不會費心使用浮點數來佈局。

爲什麼我們仍然在使用它們進行佈局？

因爲更好的選擇，如CSS Flexible Box Layout Module和CSS Template Layout Module仍在工作草案，並不支持所有瀏覽器。

爲什麼你的設計在IE 7,8和9中打破？

您的代碼可能存在問題，也就是說，您沒有正確使用花車。這不完全是你的錯，因爲他們從來不是爲了佈局。不過，我可以向你保證，他們的工作。我一直在使用浮動佈局很長一段時間，並始終能夠使它在大多數瀏覽器中工作。

內聯塊更好嗎？

可以用浮動塊完成的許多佈局都可以使用內嵌塊完成。但是，它們不能解決所有佈局問題，它們也不適用於佈局。我發現其中一個通常會更適合預期的佈局。

參考

Floats Don’t Suck If You Use Them Right

來源

2012-03-19 20:15:45 melhosseiny

你幾乎總結了我昨晚找到的那篇文章。你是對的，海報是敲花車佈局設計。問題：我正在使用html5進行此設計，我正在使用帶有背景圖像的'

'標籤。爲什麼不在IE中顯示背景圖片？ – Muzz 2012-03-19 20:18:47

我有一個預感，你忘了使用[HTML5啓用腳本]（http://remysharp.com/2009/01/07/html5-enabling-script/）和現代[CSS重置]（http：// meyerweb .com/eric/tools/css/reset /）來說明HTML5顯示角色。 – melhosseiny 2012-03-19 20:37:31

我實際上使用最初的開發人員的最新重置腳本。（我不記得他的名字）。現在爲HTML啓用腳本，我沒有使用谷歌的腳本，但我的頭標籤中有這些：'<！ - [if lt IE 7]> <！ - [if IE 7]> <！ - - [if IE 8]> <！ - [if ie IE 8]><！ - '這是行嗎？ – Muzz 2012-03-19 20:45:15

浮動應該工作正常，但它取決於您如何使用它 - 如何鏈接到您的設計？

inline-block的不在Internet Explorer版本小於8正常工作：http://www.quirksmode.org/css/display.html

來源

2012-03-19 19:50:31 callumacrae

謝謝Callum。我還沒有發佈這些頁面。該網站位於本地機器上。 – Muzz 2012-03-19 19:53:37

您可以在線使用本示例

<div id="firstdiv"> 
    That is the first div 
</div> 
<div id="seconddiv"> 
    That is the second div 
</div>

的style.css

#firstdiv{ 
     display:inline; 
     background-color: #f00; 
    } 

    #seconddiv{ 
     display:inline; 
     background-color: #00f; 
    }

它會在IE8的工作和較高的，但如果你想在IE6中使用它a ND 7使下面的代碼中的style.css

#firstdiv{ 
    display:block; 
    background-color: #f00; 
    float: left; 
} 

#seconddiv{ 
    display:block; 
    background-color: #00f; 
    float: right; 
}

如果您使用HTML5和CSS3，你希望它與IE6工作閱讀下面的文章5 Tools to Make IE Play Nice With CSS3 and HTML5 in WordPress

你可以閱讀這篇文章太它是非常有用的difference between block, inline and inline-block

來源

2012-03-19 20:25:32

謝謝你的例子和鏈接。看看這個，'inline'和'inline-block'有什麼區別？ – Muzz 2012-03-19 20:30:56

你可以閱讀文章它將有助於http://dustwell.com/div-span-inline-block.html這是一個不錯的 – 2012-03-19 20:42:29

感謝您的最後一個鏈接，它真的讓我直！ – Muzz 2012-03-19 20:51:40

漂浮不好嗎？什麼應該用在它的地方

回答

相關問題