html - 配置ロゴとナビゲーション リンクが整列しない

Question

問題のスクリーンショット:

黄色のブロックはロゴで、青いボックスはナビゲーション リンクです (空白にしています)。本文のコンテンツ (白いボックス) の上部にくっつくように、リンクを下部に配置したいと思います。どうすればいいですか？関連する CSS と HTML は次のとおりです。

#header {
    height: 42px;
}
#logo {
    width: 253px;
    height: 42px;
    background-image:url(logo.png);
    float: left;
}
#nav {
    width: 100%;
    border-bottom: 2px solid #3edff2;
    vertical-align: bottom;
}
#nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-bottom: 4px;
    text-align: right;
    font-size: 1.25em;
}
#nav ul li {
    display: inline;
    background-color: #3edff2;
    padding: 5px;
}

    <div id="header">
        <div id="logo"><a href="/"></a></div>
        <div id="nav">
            <ul>
            <li><a href="#">*****</a></li>
                            [...]
            </ul>
        </div>
    </div>

前もって感謝します。

Answer 1

これを試して。Firefox/Mac で動作するようです

#header {
    height: 42px;
}
#logo {
    width: 253px;
    height: 42px;
    background: #00ffff;
    float: left;
}
#nav {
    width: 100%;
    border-bottom: 2px solid #3edff2;
    height: 42px;
}
#nav ul {
    list-style-type: none;
    margin: 0;
    padding-top: 18px;
    margin-bottom: 4px;
    text-align: right;
    font-size: 1.25em;
}
#nav ul li {
    display: inline;
    background-color: #3edff2;
    padding: 5px;
}

Answer 2

左下の？clear: both;その場合は、#nav ブロックを設定することから始めます。

それ以外は、あなたの質問がよくわかりません。どのように見えるかを jpg にしてもらえますか?

Answer 3

次のように絶対位置を使用できます。

#header {
    position: relative;

    height: 42px;
}
#nav {
    position: absolute;
    bottom: 0px;

    width: 100%;
    border-bottom: 2px solid #3edff2;
    height: 42px;
}

この方法では、「header」分割に関連する絶対配置で「nav」を作成します。