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

Question

我使用过Bootstrap,并研究过Foundation.从我所看到的,他们都float:用来实现响应式网格.

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

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

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

Answer 1

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

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

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

然而，该方法带来了空白inline-block问题（因为网格项变成了某种单词），可以通过多种方式解决这个问题，Chris Coyier 对此进行了广泛的解释：

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

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