Html 响应网格框架-浮动：vs显示：表格单元格 我使用Bootstrap，研究基金会。据我所见，它们都使用float:来实现响应网格

我还见过只使用

显示：表格单元格

和

@media

查询的响应网格

后者对我来说似乎更好，因为

float:

旨在实现特定的排版效果，因此使用它来实现响应性网格布局似乎是一种技巧

---

我的问题是：代码>浮动：使用Bootstrap、基础和其他响应网格来解决旧版本浏览器中缺少适当的<代码>表单元格< /代码>的支持吗？如果还有其他原因，我也想听听。

制作网格系统大致有三种方法：

float

内联块

表格单元格

它们各有利弊。Bootstrap可能使用

float

，因为作为一个框架，它很容易适应不同的场景

float

方法的一个很大限制是不能垂直对齐网格元素，我个人更喜欢使用

inline block

方法

然而，

内联块

方法带来了一个空白的问题（因为网格项变成了一种单词），可以通过各种方式固定，正如Chris Coyier广泛解释的那样：

---

在我看来，

表格单元格

方法的最大问题是，您只能将网格元素放置在一行，因为您无法通过CSS将它们推到新行上。这意味着对于每一行，您都需要一个新的容器元素，对于响应性设计来说，它变得非常不灵活。

我同意gyo所写的一切，并且只想补充一点，我发现（以前的YUI3网格）是内联块方法的一个有效且跨浏览器友好的应用程序。有趣的是，它还包含了前面提到的一些柔性长方体属性。然而，如果国际化是一项要求，那么一个大的胜利是，当设置dir=“rtl”时，内联块自动反转，这与基于浮点的布局不同（不确定表格）。

据我所知，您可以要求引导使用堆叠（

z-index

），而不是

float

s，当所有浏览器都支持Flexbox时，这3种方法将被淘汰。您还可以检查此答案，以确定元素之间具有浮动和相等边距的网格：。迫不及待地等待flexbox，因为这可能会变得非常复杂。要添加内联块元素之间的空格主题：无论如何，您应该缩小HTML，为什么不在一行中添加所有内容呢。