0

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

所以我想创建一个 Metro 菜单（确实受到 win 8 X3 的启发），所以我让 div 可以用 Jquery 移动。现在我想以正确的方式定位它们：

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

等等

我得到了前 2 行的完美。现在问题如下：我的第二个大块将像这样放置：

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

或者就在其他 div 后面：/

这里有一些代码可以让我更清楚我的意思 XD：[CSS]

    <style>
#facebook{
    margin-left:10px;
    margin-top:10px;
    width:462px;
    height:174px;
    border:none;
    background-color:transparent;
    background:none;
    background-image:url(buttons/facebook.png);
    background-repeat:no-repeat;
    background-size:cover;
}

#agenda{
    float:left;
    margin-left:18px;
    margin-top:10px;
    width:223px;
    height:146px;
    border:none;
    background-color:transparent;
    background:none;
    background-image:url(buttons/Agenda.png);
    background-repeat:no-repeat;
    background-size:cover;
}

#contacts{
    float: none;
    width: 462px;
    height: 174px;
    border: none;
    background-color: transparent;
    background: none;
    background-image: url(buttons/Contacts.png);
    background-repeat: no-repeat;
    background-size: cover;
    margin: 10px;
    position: relative;
}
</style>

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 的好教程，或者只是一些关于操作方法的解释，那就太棒了！^_^

提前致谢！

4

1 回答 1

2

嗨为此，您可以为菜单使用主容器，并在其中创建具有两个不同类的 div。在我的情况下bb（大块）和sm（小块）。

然后你可以添加 CSS 样式。查看此演示并提出任何问题http://jsfiddle.net/AKr3k/6/

编辑

在你的 CSS 中尝试clear:both为你的大块添加。

于 2013-10-28T14:30:43.660 回答