哪一個是正確的方法，內聯塊還是浮點？

我正在設計一個網站的佈局，並且對何時使用inline-block或float感到困惑。最好的方法是：inline-block或float？哪一個是正確的方法，內聯塊還是浮點？

使用inline-block表示它不支持Internet Explorer。有時候float也會造成破壞（即使使用clearfix hack）。

2013-04-02 Vivek Vikranth

使用表，而不是如果你真的擔心的IE支持CSS佈局。 – Raptor

清除修復適用於所有情況。所以，使用浮動屬性，因爲你擔心跨瀏覽器。 –

[float：left; vs display：inline; vs display：inline-block; vs display：table-cell;]（http://stackoverflow.com/questions/11805352/floatleft-vs-displayinline-vs-displayinline-block-vs-displaytable-cell） –

請參閱文章Should You Use Inline-Blocks As A Substitute For Floats。它會幫助你很多。

來源

2013-04-02 06:31:39 Sachin

謝謝Sachin真的非常有用的文章。 –

-2

對於佈局，您不應該使用。

根據http://www.w3schools.com/cssref/pr_class_display.asp#gsc.tab=0，互聯網支持所有內聯屬性資源管理器 8+，所以如果您不開發商業網站應該沒問題。

我推薦使用<div>和HTML5元素，如<header>和<article>。例如，

<body> 
    <header> 
    <div id="logo"> 
     <img src="myLogo.png" alt="logo"/> 
    </div> 
    <nav> 
    </nav> 
    </header> 
    <div id="pageContainer"> 
    <article> 
     <section> 
     ... 
     </section> 
    </article> 
    </div> 
</body>

然後，對於在每個<div>單個元件，可以定義的內聯或浮動（如圖片或表）。

<div>：基本上，一個網頁的一部分。

名單甜HTML5元素的!: http://www.w3schools.com/html/html5_new_elements.asp#gsc.tab=0

例子：http://jsfiddle.net/JYZhz/

來源

2013-04-02 06:35:58

一方面你說只使用'inline-block'沒有任何商業網站，另一方面你推薦使用html5元素，如果在不支持它們的IE版本中使用html5元素打破布局，然後使用不支持的'inline-block'。對於html5和inline塊都有修復，讓他們在IE 6 +中工作。額外的html元素不是用於佈局，而是用於語義/邏輯結構，css用於佈局/樣式。 –

是真的，歡呼指出。只是基於幾個假設回答這個問題:) –

哪一個是正確的方法，內聯塊還是浮點？

回答

相關問題