Question

我正在尝试使用三种方式分割标题（左侧是徽标，中间是某些内容，右侧是其他内容）。标题的宽度为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很好。只需在HTML中移动＃header-middle last。那么什么是浮动：右边是向右，浮动：左边将向左移动，中间内容将向上填充并占据无人认领的中间空间。你拥有它的方式发生了什么，是不受欢迎的元素是在它之后推动浮动元素。

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

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

    </div>
</div>

如果不能更改HTML顺序，那么只需为所有内容指定宽度，然后浮动所有项目。

Answer 2

这是另一个供您考虑的解决方案：

在下面的代码中，我删除了所有浮动并使用相对大小调整以使您的设计更好地处理窄...

enter image description here

......而且很宽......

enter image description here

...屏幕宽度更响应。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>

    <style>
        #header {
            padding: 25px 10px;
            height: 55px;
            border-bottom: 1px solid #d3d3d3;
            overflow: no-content;
            min-width: 400px;
        }

        div#header div {
            display: inline-block;
            padding: 1% 0;
            margin: 0 2%;
            text-align: center;
            border: 4px dashed; /* Useful for positioning */
            font-size: 2em;
        }

        #logo {
            color: #08a3d9;
            width: 20%;
            border-color: red; 
        }

        #header-middle {
            width: 40%;
            border-color: green; 
        }

        #header-right {
            width: 20%;
            border-color: blue; 
        }
    </style>
</head>
<body>

    <div id="header">
        <div id="logo">
            logo
        </div>
        <div id="header-middle">
            middle
        </div>
        <div id="header-right">
            end
        </div>
    </div>
</body>
</html>

我还建议使用类似HTML5 Boilerplate或Columnal的内容，提供合适的响应式网格系统，以便您的网站在桌面和桌面上都能很好地运行。移动。

Answer 3

我为你做了另一个jsFiddle。

已更新 http://jsfiddle.net/zGfh7/

我的回答比魔术师的要复杂得多，但它也有效。

我在中间标题中添加了float: left。

此外，我将所有标题的宽度更改为33％，并删除了所有边距和填充等，以使事情更加清晰。您可以根据自己的喜好保留或更改33％的宽度，但要确保所有宽度加起来达到100％，这样可以确保标题很好地填充。

我还添加了背景色，这样你就可以看到事情很好地对齐了。

尝试将页面的标题垂直分割为三个区域，但右侧不正确地显示在中间

3 个答案: