什么是更好的方法，浮动或在线显示？

问题描述：

<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时，它会干扰内容的正常流动。

所以我想知道，上述哪种方法是实现内联显示的最佳方法？如果它的第二种方法，那么这是否意味着我不应该使用第一种？

[** 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;

但“浮动：左”也是有用的，当你不想块，你想它左对齐

答

显示：内联块是最好的方式，但请记住，当你使用display：inline-block时，会出现一些跨浏览器问题，div可能会显示一点点在各种浏览器中不同，例如某些可能对齐顶部，而在其他浏览器中，它可能是对齐底部。一个简单的方法来解决这个问题是通过设置垂直对齐

使用display：inline-block的好处是你可以让你的div在中心。如果你也想让你的div显示在页面的中心，那么这可以通过使用display：inline-block和父div来实现，你必须添加text-align：center。这不能通过浮动来实现，并且可以从要添加的一侧保存这些额外的填充以使它们出现在中心。

浮动：左有它的好处，也应该用于更随即开始块，无论何时何地需要

答

您可以同时使用，如果你给显示：inline-block的，股利会
反之亦然，如果我们使用float：left，，则返回块元素，直到我们指定宽度时，它并不相邻。

什么是更好的方法，浮动或在线显示？

相关推荐