1

我无法将 div 与 FLOAT:LEFT; 对齐。标签。我忽略的代码有问题吗？

徽标应该在最左边，两个 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，这可以防止这种情况发生。

这是一个可以让您更接近的示例。清除消失了，两个右侧元素上的浮动也消失了。相反，添加了一个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 回答