Question

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

<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：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 Dashboard一样），使用纯CSS。但是，您可以使用jQuery或CSS3过渡更改此效果。

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

2 个答案: