响应式网格框架 - float：vs display：table-cell

Question

我使用过Bootstrap，并研究过Foundation。从我看到的情况来看，他们都使用float:来实现响应式网格。

我还看到仅使用display: table-cell和@media查询的响应式网格。

后者对我来说似乎更好，因为float:旨在实现特定的排版效果，因此使用它来实现响应式网格布局似乎是一种黑客攻击。

我的问题：引导程序，基础和其他响应式网格使用float:来解决旧版浏览器缺乏正确table-cell支持的问题吗？如果还有其他原因，我也想听听。

Answer 1

制作网格系统的方法大致有三种：float inline-block table-cell

他们都有PRO和CON。 Bootstrap可能使用float，因为作为一个框架，它可以轻松适应不同的场景。

float方法的一大限制是你不能垂直对齐网格元素，我个人更喜欢使用inline-block方法。

然而，inline-block方法带来了空白的问题（因为网格项成为一种单词），可以通过各种方式修复，正如Chris Coyier所解释的那样： / p>

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

在我看来，table-cell方法的最大问题是，您只能将网格元素放在一行中，因为您无法通过CSS将它们推送到新行。这意味着对于每一行，您需要一个新的容器元素，并且它对于响应式设计变得非常不灵活。

Answer 2

我同意gyo编写的所有内容，并且只会添加我发现Pure grids（以前称为YUI3网格）是内联块方法的有效且跨浏览器友好的应用程序。有趣的是，它还包含了一些前面提到的Flexible Box属性。但是，如果需要国际化，那么一个大赢家就是当设置dir =“rtl”时内联块会自动反转，这与基于浮动的布局（不确定表格）不同。