使用 CSS“显示”属性的 Xbox 仪表板

Question

我并没有真正使用过 CSS 的 Display 属性，因为大多数表格已经足够了，但是在决定通过尝试重新创建 Xbox 仪表板再次练习 HTML 之后。因为仪表板有一些单元格是几个单元格大我不认为这是一个很好的表格应用程序，因为 div 标签被越来越多地使用，我觉得我应该用它们练习。
然而，这让我知道如何对齐其他人一侧的单元格，例如左侧两个单元格和两个旁边的一个大单元格，我该怎么做？我已经尝试了 inline-block 的显示属性以及其他具有不同单元格的负载组合，但没有成功。到目前为止，我的代码只有：

<div style="width: 50px; height: 50px; background-color:red;"></div>
<div style="width: 50px; height: 50px; background-color:green;"></div>
<div style="width: 100px; height: 100px; background-color:blue;"></div>

Answer 1

使用 CSS float: 属性来排列 div。在这种情况下，需要在空间上进行一些思考，但这并不太难。

例如http://jsfiddle.net/2K9TG/ 在这个例子中，黑色边框的 div 没有设置浮点数，红色边框的 div 设置了浮点数

float:left; 

因此，通过浮动对象，所有那些将 float 设置为 float:left 或 float:right 的对象将被格式化为彼此相邻（内联）而不是彼此下方。使用 Xbox 仪表板之类的东西会变得复杂得多，您必须将 div 放入 div 中并浮动其中一些 div 和其他不浮动。我制作了一个 jsFiddle 示例 http://jsfiddle.net/xPAGd/ 供您查看。所有 div 都有一个红色边框，因此您可以看到它们的作用。希望这对您有所帮助

这里还有 w3schools 提供的关于浮动的很棒的教程，他们解释得比我好得多。 http://w3schools.com/css/css_float.asp

Answer 2

从Sam R.'s answer 构建，您可以使用CSS Grid layout 来更轻松地在CSS 中复制Xbox 仪表板“平铺”设计。

我冒昧地为您敲开an example（带有弹出悬停效果，如 Xbox 仪表板），使用纯 CSS。但是，您可以使用 jQuery 或 CSS3 过渡来更改此效果。