什麼是更好的方法，浮動或在線顯示？

在這個例子中我將使用2倍的DIV什麼是更好的方法，浮動或在線顯示？

<div> 
    <div class="element"></div> 
    <div class="element"></div> 
</div>

使用CSS

.element { float: left; }

好了，所以上述是顯示塊作爲內聯的一種方法。我最近遇到了另一種方法：

<div> 
    <div class="element"></div> 
    <div class="element"></div> 
</div> 

.element { display: inline-block; }

現在上面還顯示了塊內嵌。

雖然第一種方法會有另一件擔心的事情，即當您使用float時，它會干擾內容的正常流動。

所以我想知道，上述哪種方法是實現內聯顯示的最佳方法？如果它的第二種方法，那麼這是否意味着我不應該使用第一種？

來源

2014-10-31 Uzair Hayat

[** 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）和[** CSS的缺點：顯示：內聯塊vs浮動：左**]（http://stackoverflow.com/questions/15172520/drawback-of-css-displayinline-block-vs-floatleft） – 2014-10-31 03:18:35

感謝您的鏈接:) – 2014-10-31 06:04:32

'display：flex '是最好的。 :) – Marwelln 2014-10-31 07:16:29

「display：inline-block;」是實現在線顯示接受的最佳方法。

這裏是覆蓋這個話題很好的資源：http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

基本上IE瀏覽器有一個名爲「hasLayout的」觸發。觸發此操作將允許您在塊級元素上使用display：inline-block（默認情況下，IE只允許在本地內聯元素上內聯塊）。

另外舊版本的Firefox不支持內聯塊，但是有一個「內聯棧」值（moz-inline-stack）。

按我的知識，最好的方式得到一個跨瀏覽器「顯示：inline-block的」

display:-moz-inline-stack; 
display:inline-block; 
zoom:1; 
*display:inline;

但「浮動：左」也是有用的，當你不想塊，你想它左對齊

來源

2014-10-31 05:23:29

顯示：內聯塊是最好的方式，但請記住，當你使用display：inline-block時，會出現一些跨瀏覽器問題，div可能會顯示一點點在各種瀏覽器中不同，例如某些可能對齊頂部，而在其他瀏覽器中，它可能是對齊底部。一個簡單的方法來解決這個問題是通過設置垂直對齊

使用display：inline-block的好處是你可以讓你的div在中心。如果你也想讓你的div顯示在頁面的中心，那麼這可以通過使用display：inline-block和父div來實現，你必須添加text-align：center。這不能通過浮動來實現，並且可以從要添加的一側保存這些額外的填充以使它們出現在中心。

浮動：左有它的好處，也應該用於更隨即開始塊，無論何時何地需要

來源

2014-10-31 06:23:17

您可以同時使用，如果你給顯示：inline-block的，股利會
反之亦然，如果我們使用float：left，，則返回塊元素，直到我們指定寬度時，它並不相鄰。

來源

2014-10-31 06:33:18 stanze

什麼是更好的方法，浮動或在線顯示？

回答

相關問題