使用display的优点：inline-block vs float：在CSS中保留

Question

使用display的优点：inline-block vs float：在CSS中保留通常情况下，当我们想要DIVs连续使用多个时float: left，但现在我发现了这个技巧display:inline-block示例链接在这里。在我看来，这display:inline-block是一个更好align DIVs的连续方式，但有任何缺点吗？为什么这种方法不那么流行float呢？

Answer 1

虽然我同意通常inline-block更好，但如果您使用百分比宽度来创建响应网格（或者如果您想要像素完美的宽度），还有一件事需要考虑：

如果您使用inline-block的是总宽度为100％或接近100％的网格，则需要确保HTML标记在列之间不包含空格。

对于浮点数，这不是您需要担心的事情 - 列浮动在列之间的任何空格或其他内容上。这个问题的答案提供了一些很好的提示，可以在不使代码变得丑陋的情况下删除HTML空格。

如果由于任何原因您无法控制HTML标记（例如限制性CMS），您可以尝试此处描述的技巧，或者您可能需要妥协并使用浮点数而不是内联块。还有一些丑陋的CSS技巧只能在极端情况下使用，比如font-size:0;在列容器上然后在每列中重新应用字体大小。

例如：

• 这是一个宽33.3％的3列网格float: left。它“只是工作”（但需要清除包装）。

• 这是完全相同的网格inline-block。块之间的空白区域创建一个固定宽度的空间，将总宽度推到100％以上，打破布局并使最后一列下拉一条线。

• 这是相同的网格，inline-blockHTML中的列之间没有空格。它“再次正常工作” - 但HTML更加丑陋，你的CMS可能会强制某种美化或缩进其HTML输出，这使得现实难以实现。

Answer 2

如果要div准确对齐像素，请使用float。inline-block似乎总是要求你切掉几个像素（至少在IE中）