1

我并没有真正使用过 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>
4

2 回答 2

2

使用 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

于 2013-07-22T02:42:12.983 回答
0

根据Sam R. 的回答，您可以使用CSS 网格布局来更轻松地在 CSS 中复制 Xbox 仪表板“平铺”设计。

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

于 2013-07-23T09:18:43.080 回答