0

我有一个包含 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 的最大宽度需要为 1600 像素，我需要 JumperMenu 贴在页脚的左侧，徽标在中心，navJumpMenu 贴在右侧，右侧和左侧元素需要 10 像素填充。所有都是浮点数很好 - 我遇到的问题是我需要所有元素也在较小的屏幕上在它们的位置内移动 - 所以说屏幕只有 1200px 我需要 3 个元素坚持它们各自的布局位置，但调整以适应屏幕尺寸。有没有人知道如何使用纯 CSS 来实现这一点 - 所以我不必求助于 jquery 定位？干杯

4

2 回答 2

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 个元素实际上不会相互重叠，但我认为这就是您想要的，不是吗？

于 2012-10-22T10:55:59.327 回答
0

这是你想要的？

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

希望有帮助。

于 2012-10-22T10:53:45.367 回答