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;} 

希望有帮助。