我的网页中有一个标题，其中显示了 Logo 、应用程序名称、帮助链接和注销。 Logo 位于左上方，注销位于右上方，帮助位于注销链接之前。其余空间应由应用程序名称占用。我试图 float 所有 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 方法做同样的事情。但这涉及对宽度进行硬编码。 Logo 宽度或注销的微小变化，帮助 div 宽度会在应用程序名称 div 中产生问题。
Click here查看 css3 calc 的工作示例
然后我尝试使用带内部 div 的 float 来实现它。下面是我的新代码
<!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 更深。
我认为还有另一种解决方案涉及使用绝对定位。但我不知道该怎么做，这是否是一个好方法。
最佳答案
您可以使用 display:table 和 display:table-cell 实现您想要的:
.header {display:table}
.header > div {display:table-cell}
只要您为 Logo 、注销和帮助 div 提供宽度，应用名称就应该拉伸(stretch)以占据标题的其余部分
关于html - 如何水平对齐代表表格行的div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20681319/