Question

我有一个页脚，其中包含3个元素，如下所示：

 <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需要最大宽度为1600px，我需要将JumperMenu固定在页脚的左侧，标识位于中间，navJumpMenu要粘贴到右侧，右侧和左侧元素需要10px填充。。一切都很好漂浮 - 我的问题是我需要所有的元素也在他们的位置在较小的屏幕上移动 - 所以说屏幕只有1200px我需要3个元素坚持他们各自的布局位置，但调整到适合在屏幕尺寸内。有没有人知道如何用纯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个元素实际上不会相互运行，但我认为这就是您想要的不是吗？

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

希望有所帮助。

CSS浮动/中心组合响应式设计问题

2 个答案: