微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

我使用过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将它们推到一个新的行上.这意味着对于每一行,您需要一个新的容器元素,并且它对于响应式设计变得非常不灵活.

原文地址:https://www.jb51.cc/html/426054.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐