響應CSS菜單元素定位

Question

我想改變我的舊網站的菜單是移動友好，有一個問題是如何「菜單元素」被顯示在小屏幕上。

菜單由3個元素（左，中，右），現在在小屏幕上的，它們垂直進去相同的順序。

但我想知道，如果可能用CSS讓他們這樣的位置，其中中間保持其位置而左，右下它移動，還是需要一些更多的花樣。

如何實現的呢？

http://img834.imageshack.us/img834/2203/menuse.jpg

編輯，添加簡單的代碼是我用打轉轉：

<div id="header"> 

        <div id="Bholder"> 
         <div id="AButton"></div> 
         <div id="HButton"></div>  
         <div id="CButton"></div>  
        </div> 

       </div> 

CSS

#Bholder{ 
margin-left: auto; 
margin-right: auto; 
max-width: 750px; 

} 

#AButton{ 
float: left; 
width: 250px; 
height:100px; 
background-color: red; 
} 

#CButton{ 
float: left; 
width: 250px; 
height:100px; 
background-color: green; 
} 

#HButton{ 
float: left; 
width: 250px; 
height:100px; 
background-color: yellow; 

} 

@media only screen and (max-width: 767px){ 
#Bholder{ 
margin-left: auto; 
margin-right: auto; 
max-width: 250px; 

} 
    } 

Answer 1

也許你可以嘗試浮動左，右元素的權利，和中間的元素在左邊。然後使包裝元素的寬度與每個元素的寬度相同，以使它們在視覺上與「夾具」相關。

但是啊，代碼將是有益的，看你如何菜單設置。

[編輯]

@media only screen and (max-width: 767px){ 
    #Bholder{ 
     margin-left: auto; 
     margin-right: auto; 
     max-width: 250px; 
     position: relative; 
    } 
    #AButton { 
     position: absolute; 
     top: 100px; 
     left: 0; 
    } 
    #HButton { 
     position: absolute; 
     top: 0px; 
     left: 0px; 
    } 
    #CButton { 
     position: absolute; 
     top: 200px; 
     left: 0; 
    } 
} 

的說明：我會堅持，在一個<ul>用的的<li>代替div。我會使用類而不是#id的爲您的CSS。