CSS浮動/中心聯合響應式設計問題

Question

我有一個在其內具有三個元素如下頁腳：

<div class="footer"> 
    <div class ="jumperMenu"> 
    <ul> 
     <li>1</li> 
     <li>2</li> 
     <li>3</li> 
    </ul> 
    </div> 
    <div class ="logo"> 
     <a href="#"><img src="#"/></a> 
    </div> 
    <div class ="navJumpMenu"> 
    <ul> 
     <li>Page1</li> 
     <li>Page2</li> 
     <li>Page3</li> 
    </ul> 
    </div> 

頁腳DIV需要具有1600像素一個最大寬度，我需要的JumperMenu粘在頁腳的左側，標誌位於中間，navJumpMenu粘到右側，左側和右側元素需要10px填充。 一切都很好，漂浮 - 我遇到的問題是我需要所有的元素也可以在小屏幕上的位置移動 - 所以說屏幕只有1200px，我需要3個元素來堅持它們各自的l ayout位置，但調整到適合屏幕尺寸。 有沒有人有如何完成這與純CSS的任何想法 - 所以我不必訴諸於jQuery的定位？ 乾杯

Answer 1

http://jsfiddle.net/calder12/KjG8v/1/

.footer{max-width:1600px; margin:0 auto;text-align:center;} 
.jumperMenu{float:left;} 
.navJumpMenu{float:right;} 
.logo{margin:0 auto;}​ 

你可能要設置的最小寬度頁腳容器上也以確保3個元素實際上並不比對方運行，但我認爲這是你想要的ISN是嗎？

Answer 2

這是你在找什麼？

#footer { 
display: inline-block; 
max-width: 1600px; 
min-width: <your min width>; 
text-align: center; 
} 
#footer>* {display: inline-block;text-align: left;} 
#footer #navJumpMenu{float:right;} 
#footer #jumperMenu{float:left;} 

希望有幫助。