Question

在这个例子中，我将使用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时，它会干扰内容的正常流动。

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

Answer 1

“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）。

据我所知，获得跨浏览器的最佳方式是“显示：内联块”

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

但是当你不想要块并希望它左对齐时，“float：left”也很有用

Answer 2

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

使用display的好处：inline-block是你可以将div放在中心位置。如果你想将你的div显示在页面的中心，那么这可以通过使用display：inline-block来实现，在父div中你必须添加text-align：center。浮动时无法实现这一点，您可以从要添加的侧面保存这些额外的填充，以使它们显示在中心。

Float：left也有它的好处，应该在任何时候和任何地方使用更多内联块

Answer 3

如果你给出display：inline-block，你可以使用两者 div将彼此相邻放置，
如果我们使用float：left，则反之亦然直到我们指定宽度，它不会彼此相邻。

什么是更好的方法，浮动或显示内联？

3 个答案: