5

我正在构建一个响应式设计,我需要两个等高的列。我不想依赖 JavaScript,我希望列之间有空格以增加可读性。

我做了两个布局;一个使用display:table;另一个使用floatandposition。这里的问题是我似乎无法让后一种方法在列之间有空格,而 table 方法在这方面工作得很好。

因此,理想情况下,我希望使用表格方法,但我想知道这是否是一种可接受的方式来为将利用现代 Web 标准的网站实现等高列设计?

CSS表格支持研究

通过一些研究,我发现该display:table方法与以下浏览器兼容(通过支持我需要的所有必要的 CSS 属性):

  • 铬 1+
  • 火狐 1+
  • 互联网浏览器 8+
  • Safari 1.2+
  • 歌剧 7+
  • 安卓2.1+
  • iOS 3.2+
  • 黑莓 6+
  • Internet Explorer Mobile 9+ (Windows Phone 7+)
  • Opera 移动版 10+
  • 歌剧迷你 5+
  • 诺基亚浏览器 7.3+ (Symbian Anna)
  • 诺基亚浏览器 8.5+(诺基亚 N9 上的 MeeGo 1.2)

Google 搜索“CSS 显示表是个好主意吗?” 揭示了几篇反对CSS表格方法的文章,特别是我一直在阅读的这篇文章。我知道它已经有好几年了,那么考虑到我在上面发现的浏览器支持水平,现在这种方法的总体接受度到底是多少?

笔记

  • 我想放弃对 Internet Explorer 7 及更低版本的支持,我不确定 Firefox 3 及更低版本(欢迎提出建议)。

  • 此外,我通常希望在较旧的浏览器/浏览器版本中进行测试,但我的笔记本电脑没有足够的 RAM 来运行虚拟机,并且在不稳定的 10-20 Mb/s 连接上下载必要的文件需要数小时。有没有其他选择(房子里的所有其他电脑也没有旧的浏览器)?

谢谢!

参考

4

1 回答 1

1

是的,看看Bootstrap的源代码,它们是这样排列的

在浏览器中寻找

display: table;

您将看到他们如何在 .row 中实现它

于 2013-11-15T01:39:57.320 回答