1

我正在尝试将标题拆分为三种方式（左侧的徽标，中间的徽标和右侧的其他内容）。标题的宽度为 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;
}
4

3 回答 3

6

你的 CSS 很好。只需将#header-middle 移到 HTML 的最后。那么什么是float:right会向右走，float:left会向左走，中间的内容会向上填充，占据无人认领的中间空间。你拥有它的方式发生了什么，未浮动元素正在推动浮动元素。

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

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

    </div>
</div>

如果更改 HTML 顺序不是一个选项，那么只需为所有内容分配宽度，并浮动所有剩余的项目。

于 2013-03-28T06:27:23.023 回答
2

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

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

在此处输入图像描述

...和宽...

在此处输入图像描述

...屏幕宽度响应更快。

<!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 之类的东西，它们提供了一个不错的响应式网格系统，以便您的网站在桌面和移动设备上都能完美运行。

于 2013-03-28T07:10:16.673 回答
1

我为你制作了另一个 jsFiddle。

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

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

我添加float: left到中间标题。

此外，我将所有标题的宽度更改为 33%，并删除了所有左侧边距和填充等，以使内容更干净。您可以根据自己的喜好保留或更改 33% 的宽度，但确保所有宽度加起来为 100% 以确保标题被很好地填充。

我还添加了背景颜色，因此您可以看到它们很好地对齐。

于 2013-03-28T06:34:11.747 回答