Question

我无法将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);
}

Answer 1

您正在使用float使它们彼此相邻，但您也在使用clear，这可以防止此情况发生。

这是一个让你更接近的例子。清除已经消失，两个右手元素上的浮标也消失了。而是添加了一个左边距。

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);
}

Answer 2

我建议您使用另一个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);
}

结果为here

DIV浮动：左;麻烦

2 个答案: