1

div を FLOAT:LEFT; に揃えるのに問題があります。鬼ごっこ。私が見落としているコードに何か問題がありますか?

ロゴは一番左にあり、2 つの div バーが互いに重なっているはずです。

前もって感謝します。

<header id="head-01">
    <div class="logo"></div>
    <div class="nav-head-01"></div>
    <div class="nav-head-02"></div>
</header>

header#head-01 {
    clear: both;
    float: left;
    width: auto;
    height: auto;
    display: block;
}
header#head-01 div.logo {
    clear: both;
    float: left;
    width: 60px;
    height: 60px;
    margin-right: 2.5px;
    display: block;
    background-color: rgba(238, 28, 36, 0.4);
}
header#head-01 div.nav-head-01 {
    clear: both;
    float: left;
    width: 880px;
    height: 30px;
    margin-left: 2.5px;
    display: block;
    background-color: rgba(57, 59, 60, 0.3);
}
header#head-01 div.nav-head-02 {
    clear: both;
    float: left;
    width: 880px;
    height: 30px;
    margin-left: 2.5px;
    display: block;
    background-color: rgba(142, 145, 148, 0.3);
}
4

2 に答える 2

2

を使用floatしてそれらを隣り合わせに表示させていますがclear、これを防ぐ も使用しています。

これがあなたを近づける例です。右側の 2 つの要素のフロートと同様に、クリアもなくなりました。代わりに、margin-left が追加されます。

header#head-01 {
    float: left;
    width: auto;
    height: auto;
    display: block;
}
header#head-01 div.logo {
    float: left;
    width: 60px;
    height: 60px;
    margin-right: 2.5px;
    display: block;
    background-color: rgba(238, 28, 36, 0.4);
}
header#head-01 div.nav-head-01 {
    width: 880px;
    height: 30px;
    margin-left: 62.5px;
    display: block;
    background-color: rgba(57, 59, 60, 0.3);
}
header#head-01 div.nav-head-02 {
    float: left;
    width: 880px;
    height: 30px;
    margin-left: 62.5px;
    display: block;
    background-color: rgba(142, 145, 148, 0.3);
}
于 2013-07-01T20:34:18.390 に答える
1

別の div を使用して 2 つのナビゲーションをラップすることをお勧めします。

<header id="head-01">
    <div class="logo"></div>
    <div class="nav-wrapper">
    <div class="nav-head-01"></div>
    <div class="nav-head-02"></div>
    </div>
</header>

そして、その div を左にフロートします。

header#head-01 {
    float: left;
    width: auto;
}
header#head-01 div.logo {
    float: left;
    width: 60px;
    height: 60px;
    margin-right: 2.5px;
    background-color: rgba(238, 28, 36, 0.4);
}

.nav-wrapper {
    float: left;
}
header#head-01 div.nav-head-01 {

    float: left;
    width: 880px;
    height: 30px;
    margin-left: 2.5px;
    display: block;
    background-color: rgba(57, 59, 60, 0.3);
}
header#head-01 div.nav-head-02 {
    clear: both;
    float: left;
    width: 880px;
    height: 30px;
    margin-left: 2.5px;
    display: block;
    background-color: rgba(142, 145, 148, 0.3);
}

結果はこちら

于 2013-07-01T20:41:28.740 に答える