响应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。