html - 3 列の Web ページのヘッダーを作成する

Question

これは次の場所にありstyle.cssます。

#top{
    background: white;
    text-align: center;
    height: 180px;
    border-bottom: solid 1px #efeecc;
}

#topLogo{
    background: yellow;
    width: 25%;
    float:left;
}

#topDescription {
    background: red;

    width: 75%;
    text-align: center;
}

#topDepartment {
    background: blue;
    float:right;
    width: 25%;
    text-align: right;
}

これはindex.html次のとおりです。

<div id="top">
    <div id="topLogo">
        <a href="index.html"><img src="img/book.jpg" width="170" height="160" border="0"/></a>
    </div>
    <div id="topDescription">
        Page title
    </div>
    <div id="topDepartment">
        Category        
    </div>
</div>

期待される結果は次のとおりです。

これが現在の結果です。

http://jsfiddle.net/p2T5q/

Answer 1

ここにデモがあります：http://jsfiddle.net/p2T5q/7/

CSS:

#top{
    background: white;
    text-align: center;
    display:table;
    height: 180px;
    border-bottom: solid 1px #efeecc;
}

#topLogo{
    background: yellow;
    width: 25%;
    display:table-cell;
}

#topDescription {
    background: red;
    display:table-cell;
    width: 50%;
    text-align: center;
}

#topDepartment {
    background: blue;
    display:table-cell;
    width: 25%;
    text-align: right;
}

Answer 2

どうぞ、私はフィドルを修正し、ここに答えをコピーしました：

http://jsfiddle.net/p2T5q/2/

#top{
    height: 180px;
    border: solid 1px #555555;
    position:relative;
}
#top * {
    float:left;
}
#topLogo{
    background: yellow;
    width: 25%;
}
#topDescription {
    background: red;
    width: 50%;
}
#topDepartment {
    background: blue;
    width: 25%;
}

基本的に、幅のパーセンテージの合計が 100% になるようにし、すべての要素を左にフロートさせて、自分自身を何に配置すべきかを認識できるようにします。* を使用して、すべてのサブ要素を選択できます。この回答を受け入れていただければ幸いです。最終的に50枚のコインを手に入れてコメントを書くことができます（笑）。

Answer 3

簡単な答えは、div の合計幅が 125% であるため、100% に等しくなるように変更する必要があるということです。

2 つ目は、そのトップ div に明確な修正を加えて、フローティング div をすべて包含するようにすることです。

また、インライン スタイルは CSS ファイルに入れることができるため、使用しないでください。パーセンテージ幅の div 内にある画像に固定幅を与えています。ユーザーがビューポートのサイズを縮小すると、それは確実に壊れます。