html - 尝试将页面的标题垂直拆分为三个区域，但右侧错误地出现在中间下方

Question

我正在尝试将页眉分成三种方式(左侧是 Logo ，中间是 Logo ，右侧是其他内容)。表头宽度为100%。

我遇到的问题是右边的部分只出现在较低的位置(在中间 div 的信息下面)。在这种情况下，不确定如何简单地将正确的部分显示在右侧。我可能没有很好地解释这一点，如果我可以进一步澄清这一点，请告诉我。

<div id="header">
    <div id="logo">
        logo
    </div>
    <div id="header-middle">

    </div>
    <div id="header-right">

    </div>
</div>

使用CSS:

#header {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 25px;
    background-color: #fafafa;
    height: 55px;
    border-bottom: 1px solid #d3d3d3;
    overflow: auto;
}

#logo {
    font-size: 24pt;
    color: #08a3d9;
    width: 100px;
    float: left;
}

#header-middle {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}

#header-right {
    float: right;
    width: 300px;
    margin-right: 20px;
    text-align: center;
}

Answer 1

您的 CSS 没问题。只需将#header-middle 移到 HTML 的最后。那么什么是float:right会往右走，float:left会往左走，中间的内容会往上填充，占据无人认领的中间空间。按照您的方式发生的事情是，未 float 元素将 float 元素推到它后面。

<div id="header">
    <div id="logo">
        logo
    </div>
    <div id="header-right">

    </div>
    <div id="header-middle">

    </div>
</div>

如果更改 HTML 顺序不是一个选项，那么只需为所有内容分配宽度，并 float 所有元素。