1

ヘッダーを 3 つの方法で分割しようとしています (左にロゴ、中央に何か、右に何か他のもの)。ヘッダーの幅は 100% です。

私が抱えている問題は、右側の部分が下にしか表示されないことです (中央の div の情報の下)。その場合、右の部分を右に単純に表示する方法がわかりません。これをうまく説明できていない可能性があります。これをさらに明確にすることができるかどうか教えてください。

<div id="header">
    <div id="logo">
        logo
    </div>
    <div id="header-middle">

    </div>
    <div id="header-right">

    </div>
</div>

CSSで：

#header {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 25px;
    background-color: #fafafa;
    height: 55px;
    border-bottom: 1px solid #d3d3d3;
    overflow: auto;
}

#logo {
    font-size: 24pt;
    color: #08a3d9;
    width: 100px;
    float: left;
}

#header-middle {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}

#header-right {
    float: right;
    width: 300px;
    margin-right: 20px;
    text-align: center;
}
4

3 に答える 3

6

Your CSS is fine. Just move #header-middle last in your HTML. Then what is float: right will go right, float: left will go left, and the middle content will fill upwards and occupy the unclaimed middle space. What is happening the way you have it, is the unfloated element is pushing the floated element after it.

<div id="header">
    <div id="logo">
        logo
    </div>
    <div id="header-right">

    </div>
    <div id="header-middle">

    </div>
</div>

If changing the HTML order is not an option, then just assign widths to everything, and float all the items left.

于 2013-03-28T06:27:23.023 に答える
2

考慮すべき別の解決策を次に示します。

以下のコードでは、すべてのフロートを削除し、相対的なサイズ設定を使用して、デザインが狭い範囲をより適切に処理できるようにしています...

ここに画像の説明を入力

...そして広い...

ここに画像の説明を入力

... 画面幅の応答性が向上します。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>

    <style>
        #header {
            padding: 25px 10px;
            height: 55px;
            border-bottom: 1px solid #d3d3d3;
            overflow: no-content;
            min-width: 400px;
        }

        div#header div {
            display: inline-block;
            padding: 1% 0;
            margin: 0 2%;
            text-align: center;
            border: 4px dashed; /* Useful for positioning */
            font-size: 2em;
        }

        #logo {
            color: #08a3d9;
            width: 20%;
            border-color: red; 
        }

        #header-middle {
            width: 40%;
            border-color: green; 
        }

        #header-right {
            width: 20%;
            border-color: blue; 
        }
    </style>
</head>
<body>

    <div id="header">
        <div id="logo">
            logo
        </div>
        <div id="header-middle">
            middle
        </div>
        <div id="header-right">
            end
        </div>
    </div>
</body>
</html>

また、デスクトップとモバイルの両方でサイトが美しく機能するように、適切なレスポンシブ グリッド システムを提供するHTML5 BoilerplateやColumnalなどを使用することをお勧めします。

于 2013-03-28T07:10:16.673 に答える
1

私はあなたのために別の jsFiddle を作りました。

更新された http://jsfiddle.net/zGfh7/

私の答えは賢者の答えよりもはるかに複雑ですが、うまくいきます。

float: left真ん中のヘッダーに追加しました。

また、すべてのヘッダーの幅を 33% に変更し、margin-left やパディングなどをすべて削除して、よりクリーンにしました。33% の幅を好みに合わせて維持または変更できますが、すべての幅の合計が 100% になるようにすることで、ヘッダーが適切に塗りつぶされます。

また、背景色も追加したので、うまく配置されていることがわかります。

于 2013-03-28T06:34:11.747 に答える