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 の最大幅は 1600px である必要があります。JumperMenu をフッターの左側に固定し、ロゴを中央に配置し、navJumpMenu を右側に固定する必要があります。右と左の要素には 10px のパディングが必要です。すべてはフロートで問題ありません-私が抱えている問題は、すべての要素を小さな画面の位置内で移動する必要があることです-つまり、画面が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 に答える