如何水平对齐div表示表行 [英] How to align divs horizontally which represents a table row
问题描述
我在我的网页上有一个标题，其中显示了徽标，应用程序名称，帮助链接和注销。标志放置在左上角，注销放置在右上角，帮助放置在注销链接之前。空间的其余部分应该由应用程序名称占用。我试图浮动所有的div，然后我的divs丢失宽度，当我尝试设置宽度在我的应用程序名称div我得到意想不到的结果，当我尝试设置宽度：100％。即使我没有将宽度设置为100％，如果应用程序名称文本增加，我得到意想不到的结果。
I have a header in my web page where logo, application name, help link and logout are shown. Logo is placed left top, logout is placed right top, help is placed before logout link. The rest of the space should be occupied by the application name. I tried to float all the divs and then my divs lost width and when I try to set width on my app name div I get unexpected results when I try to set width: 100%. Even I dont set the width to 100% if the application name text increases I get unexpected results.
这是代码
<!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>
这里是一个工作示例。
然后我尝试使用CSS3 calc方法。但这涉及硬编码的宽度。标志宽度或注销的小改变，帮助divs宽度将在应用程序名称div中创建问题。
I then tried doing the same with CSS3 calc method. But this involves hard coding the widths. A small change in logo's width or logout, help divs widths will create problems in the app name div.
点击此处查看css3的工作示例calc
Click here to see the working example with css3 calc
然后我尝试使用float和内部div。以下是我的新代码
Then I tried to do it using float with inner divs. Below is my new code
<!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>
点击这里查看工作示例。
但这是创建了很多dom。有没有其他方法或第二个解决方案是不够好？
But this is creating lot of dom. Is there any other approach or the second solution is good enough?
第一个解决方案是一个总翻牌。
如果我使用CSS3然后我必须硬编码的宽度
解决方案2涉及使dom更深。
The first solution is a total flop. If I use CSS3 then I have to hardcode the widths Solution 2 involves making the dom deeper.
我想有另一个解决方案，涉及使用绝对定位。但我不知道如何做到这是一个好的方法或不。
I think there is another solution which involves using absolute positioning. But I dont know how to do it and is it a good approach or not.
推荐答案
您可以使用 display：table code> display：table-cell ：
You can achieve what you want using display:table and display:table-cell:
.header {display:table}
.header > div {display:table-cell}
只要给logo加上宽度，logout和help div那么应用程序名称应伸展到占用标题的其余部分。
As long as you give widths to logo, logout and help divs then the app name should stretch to take up the rest of the header
这篇关于如何水平对齐div表示表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
