2

正しいメニューバーレイアウトの作成に問題があります。

私のメニューバーは、次の3つのセクションに分かれています。

左（ロゴ）、中央（メニュー）、右（ログイン情報）

また、2つの異なるメニューがあります。1つは管理者用（いくつかの追加ボタン-幅は701px）と通常のユーザーメニュー（幅は447px）です。

メニューバー全体の幅は100％に設定されています。

ここで私が助けを必要としているのは、各セクションの幅属性を設定することです。

固定幅（px）を中央（メニュー）セクションに設定すると、他の2つのセクションの正しい幅のパーセンテージがわかりません。また、画面の解像度が小さいため、他のセクションに固定幅の値を設定することはできません（メニューは広いままです）。

パーセンテージ幅を中央（メニュー）セクションに設定すると、画面解像度が小さいとメニューが壊れることがあります。

では、最善の解決策は何ですか？

HTML：

<body>
    <div id="main">
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>
</body>

CSS：

#main {
    width:100%;
    height:77px;
    background-color:#373737;
    }

    #left, 
    #center,     
    #right {
        height:77px;
        }

    #left {
        float:left;
        } /* width? % or px*/

    #center {
        display:inline-block;
        } /* width? % or px*/

    #right {
        float:right;
        } /* width? % or px*/

管理メニューバー： ここに画像の説明を入力してください

通常のユーザーメニューバー： ここに画像の説明を入力してください

4

2 に答える 2

1

このCSSを試して、メインdivの合計を100％にするパーセンテージで必要な場合は、各幅を調整できます。

#main {

    width:100%;
    height:77px;
    background-color:#373737;
    padding:5px;
}

#left, #center, #right {height:77px;}

#left {float:left;background-color:black;width:25%}  /*width? % or px*/
 #center {display:inline-block;background-color:blue;width:50%; float:left}/* width? % or px*/
#right {float:left;background-color:yellow;width:25%}  /*width? % or px*/​
于 2012-05-24T13:38:22.367 に答える
0

必要に応じて要素のサイズを変更するには、おそらく JavaScript を使用する必要があると思います。いくつかの解決策がありますが、動的幅と静的幅を混在させることはできません。

フロートは、画面サイズを下げると飛び跳ねるのでアウトです。小さすぎるときに他のセクションを下回らないようにしたい場合を除きます。

各 div は、一緒に機能するのではなく、個々の要素と考えてください。ブラウザー間の互換性が目的の場合は、この状況でフロートを使用しないことを強くお勧めします。

  • 幸運を。:)
于 2012-05-24T14:14:40.397 に答える