不确定是使用 Flexbox、表格还是行和列答案

【问题标题】：Unsure whether to use Flexbox, tables, or rows and columns不确定是使用 Flexbox、表格还是行和列
【发布时间】：2014-06-05 05:51:21
【问题描述】：

所以我正在尝试为 RC 汽车制作一个可以在任何尺寸屏幕上工作的控制器，我计划让应用程序的页面有上、下、左、右和中间停止，所以排序就像电视遥控器的样子。我对 html 和 css 比较陌生，只是不确定这样做的最佳方法是什么。我希望按钮自动适应屏幕并填充它。任何建议都会很棒。

【问题讨论】：

我会选择 flexbox。如果我没有得到报酬，IE10 及以下版本会很糟糕。

标签： css html flexbox

【解决方案1】：

Flexbox 支持不是很好 (http://caniuse.com/#search=flexbox)。所有浏览器都支持表格，但是，它确实不是正确的解决方案；表格是为图表设计的，而不是布局。

最好的解决方案是对 div 使用响应式设计技术（最小宽度、最大宽度、百分比宽度等）。这应该在 IE9+ 和所有现代浏览器中兼容。有关详细信息，请参阅 http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/、http://www.sitepoint.com/common-techniques-in-responsive-web-design/ 或直接 Google“响应式设计”。

【讨论】：

【解决方案2】：

我不会使用以上任何一种。我会像这样使用绝对定位：

.up, .down, .left, .right, .stop { 
    position: absolute;
    width: 33.3%;
    height: 33.3%;
}

.up {
    top: 0%;
    left: 33.3%
}

.right {
    top: 33.3%;
    left: 66.6%;
}

等等。

这具有与人类创建的所有浏览器兼容的好处。

【讨论】：

你真的不需要绝对定位来构建这样的布局。
@Nit：是的，不用绝对定位也可以。您可能无需任何您可以命名的单一技术就可以做到这一点。然而你必须选择其中之一，我认为这是最好的。