地鐵菜單HTML/CSS/jQuery的

我目前工作的一個網站上只是爲了玩意兒，甚至更多的只是學習的基礎知識^^地鐵菜單HTML/CSS/jQuery的

所以我想創建一個地鐵菜單（按WIN 8 X3 indeedy啓發）所以我得到了與Jquery移動的div。現在我想possition他們所有的正確方法：

[ 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如何對正確的方式或只是一些解釋，這將是驚人的！^ _^

在此先感謝！

來源

2013-10-28 Ioncap

嗨爲此，您可以使用主容器爲您的菜單，並insid這創建與兩個不同類的div。在我的情況下，bb（大塊）和sm（小塊）。

然後你可以添加CSS樣式。查看本演示，並詢問任何問題http://jsfiddle.net/AKr3k/6/

編輯

在你的CSS嘗試添加clear:both你的大塊。

來源

2013-10-28 14:30:43 DaniP

BRO！非常感謝你！：d – Ioncap

地鐵菜單HTML/CSS/jQuery的

回答

相關問題