Question

我的网页上有一个标题，其中显示了徽标，应用程序名称，帮助链接和注销。徽标位于左上方，注销位于右上方，帮助放置在注销链接之前。其余的空间应该由应用程序名称占用。我试图浮动所有的div然后我的div失去宽度，当我尝试在我的应用程序名称div上设置宽度时，当我尝试设置宽度时，我得到意想不到的结果：100％。即使我没有将宽度设置为100％，如果应用程序名称文本增加，我会得到意想不到的结果。

这是代码

<!DOCTYPE html>
<html>
    <head>
        <title>Mock UI</title>
        <style>
        body {
            margin: 0px;
        }
        .oss-gradient {
            height: 5px;
            min-width: 1024px;
            background: yellow;
        }
        .header {
            height: 40px;
            min-width: 1024px;
            background: #def;
        }
        .logo {
            background-image: url("logo_top_small.png");
            background-repeat: no-repeat;
            background-position: center center;
            background-attachment: scroll;
            width: 50px;
            height: 100%;
            float: left;
        }
        .product-name {
            line-height: 35px;
            height: 100%;
            float: left;
            width: 100%;
        }
        .help {
            line-height: 35px;
            float: right;
            height: 100%;
        }
        .logout {
            line-height: 35px;
            float: right;
            height: 100%;
        }
        .content-wrapper {
            width: 1024px;
            background: #defabc;
            margin: 0px auto;
        }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="oss-gradient">
            </div>
            <div class="header">
                <div class="logo">
                </div>
                <div class="product-name">
                    App name
                </div>
                <div class="logout">
                    <a href="#">Logout</a>
                </div>
                <div class="help">
                    <a href="#">Help</a>
                </div>
            </div>
            <div class="content-wrapper">
            </div>
        </div>
    </body>
</html>

Here是一个工作样本。

然后我尝试用CSS3 calc方法做同样的事情。但这涉及对宽度进行硬编码。徽标宽度或注销的小变化，帮助div宽度会在app name div中产生问题。

Click here查看css3 calc的工作示例

然后我尝试使用带内部div的浮点数。以下是我的新代码

<!DOCTYPE html>
<html>
    <head>
        <title>Mock UI</title>
        <style>
        body {
            margin: 0px;
        }
        .oss-gradient {
            height: 5px;
            min-width: 1024px;
            background: yellow;
        }
        .header {
            height: 40px;
            min-width: 1024px;
            background: #def;
        }
        .logo {
            background-image: url("logo_top_small.png");
            background-repeat: no-repeat;
            background-position: center center;
            background-attachment: scroll;
            width: 50px;
            height: 100%;
            float: left;
        }
        .wrapper {
            height: 100%;
        }
        .product-name {
            line-height: 35px;
            height: 100%;
            float: left;
        }
        .help {
            line-height: 35px;
            float: right;
            height: 100%;
            margin-right: 10px;
        }
        .logout {
            line-height: 35px;
            float: right;
            height: 100%;
            margin-right: 10px;
        }
        .oss-text {
            line-height: 35px;
            height: 100%;
            overflow: hidden;
        }
        .content-wrapper {
            width: 1024px;
            background: #defabc;
            margin: 0px auto;
        }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="oss-gradient">
            </div>
            <div class="header">
                <div class="logo">
                </div>
                <div class="wrapper">
                    <div class="logout">
                        <a href="#">Logout</a>
                    </div>
                    <div class="wrapper">
                        <div class="help">
                            <a href="#">Help</a>
                        </div>
                        <div class="oss-text">
                            App name
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-wrapper">
            </div>
        </div>
    </body>
</html>

Click here查看工作示例。

但这创造了很多dom。有没有其他方法或第二种解决方案是否足够好？

第一个解决方案是完全失败。如果我使用CSS3，那么我必须硬编码宽度解决方案2涉及使dom更深。

我认为还有另一个涉及使用绝对定位的解决方案。但我不知道该怎么做，这是一个好方法。

Answer 1

您可以使用display:table和display:table-cell：

来实现您的目标

.header {display:table}
.header > div {display:table-cell}

只要您为徽标，注销和帮助div提供宽度，那么应用程序名称应该拉伸以占用标题的其余部分

Example

Answer 2

试试这个：

.product-name {
    line-height: 35px;
    height: 100%;
    text-align: center;
    width: 100%; 
}

Answer 3

Here's what you need只有3个div容器

标记：

<header>
    <div class='logo'></div>
    <div class='appName'><h3>Some App</h3></div>
    <div class='btn-container'>
        <button >Help</button>
        <button>Logout</button>
    </div>
</header>

和CSS：

header {
    position: fixed;
    top: 0px;
    width: 100%;
    display: table;
}
header div {
    display: table-cell;
    vertical-align: middle;
}
.logo {
    width:40px;
    background: steelblue;
    height: 40px;
    float: left;
}
.btn-container {
    width: 80px;
    float: right;
}
.appName {
    text-align: center;
    width: 100%;
}

如何水平对齐div表示表格行

3 个答案: