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

发布时间：2020-12-14 22:53:51 所属栏目：资源来源：网络整理

导读：我使用过Bootstrap,并研究过Foundation.从我所看到的,它们都使用float：来实现响应式网格. 我还看到了仅使用display：table-cell和@media查询的响应式网格. 后者似乎对我更好,因为浮动：旨在实现特定的排版效果,因此使用它来实现响应式网格布局似乎是一种黑

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

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

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

我的问题：是浮点数：引导程序,基础和其他响应式网格用于解决旧浏览器中缺少适当的表格单元支持？如果还有其他原因,我也想听听.

最佳答案

制作网格系统的方法大致有3种：浮点内联块表格

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

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

然而,内联块方法带来了空白问题(因为网格项成为一种单词),可以通过各种方式修复,正如Chris Coyier广泛解释的那样：

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!