Javascript Metro菜单HTML/CSS/Jquery

我目前正在一个网站上工作，只是为了好玩，甚至是为了学习基本知识^^

所以我想创建一个Metro菜单（indeedy受win 8 X3的启发），这样我就可以用Jquery移动div了。现在我想把它们都放在正确的位置上：

[  big block  ]
[small] [small]
[  big block  ]

等等

我拿到了前两排，非常完美。 现在的问题是： 我的第2个大区块将按如下方式放置：

[  big block  ]
[small] [small] [  big block  ]

或者就在其他部门后面：/

下面是一些代码，让我更清楚地了解XD的含义： [CSS]

#脸谱网{
左边距：10px；
边缘顶部：10px；
宽度：462px；
高度：174px；
边界：无；
背景色：透明；
背景：无；
背景图片：url（buttons/facebook.png）；
背景重复：无重复；
背景尺寸：封面；
}
#议程{
浮动：左；
左边距：18px；
边缘顶部：10px；
宽度：223px；
高度：146px；
边界：无；
背景色：透明；
背景：无；
背景图片：url（buttons/Agenda.png）；
背景重复：无重复；
背景尺寸：封面；
}
#接触{
浮动：无；
宽度：462px；
高度：174px；
边界：无；
背景色：透明；
背景：无；
背景图片：url（buttons/Contacts.png）；
背景重复：无重复；
背景尺寸：封面；
利润率：10px；
位置：相对位置；
}

HTML看起来有点像：

<div id="facebook" class="ui-widget-content"></div>
<div id="desktop" class="ui-widget-content"></div>
<div id="agenda" class="ui-widget-content"></div>
<div id="contacts" class="ui-widget-content"></div>

因此，如果有人知道一个关于如何正确放置div的好教程，或者只是一些关于如何操作的解释，那将是令人惊讶的^_^

---

提前谢谢

Hi为此，您可以使用菜单的主容器，并在其中创建具有两个不同类的div。在我的例子中，

bb

（大块）和

sm

（小块）

然后可以添加CSS样式。查看此演示并提出任何问题

编辑

在CSS中，尝试为大块添加

clear:both

<div id="facebook" class="ui-widget-content"></div>
<div id="desktop" class="ui-widget-content"></div>
<div id="agenda" class="ui-widget-content"></div>
<div id="contacts" class="ui-widget-content"></div>