我一直在尝试创建一个具有以下结构的网站： desired structure http://i50.tinypic.com/vhw076.png
但我似乎无法使标题正确（e1左，e2居中，e3右）。我希望三个元素e1，e2和e3分别位于左侧，中间和右侧。这就是我正在尝试的：
<div id="wrapper">
<div id="header">
<div id="header-e1">
1
</div>
<div id="header-e2">
2
</div>
<div id="header-e3">
3
</div>
</div>
<div id="nav">
links
</div>
<div id="content">
content
</div>
<div id="footer">
footer
</div>
</div>
有了这个css：
#wrapper
{
width: 95%;
margin: 20px auto;
border: 1px solid black;
}
#header
{
margin: 5px;
}
#header-e1
{
float: left;
border: 1px solid black;
}
#header-e2
{
float: left;
border: 1px solid black;
}
#header-e3
{
border: 1px solid black;
}
#nav
{
margin: 5px;
}
#content
{
margin: 5px;
}
#footer
{
margin: 5px;
}
UPDATE
我上面的代码给了我这个：current result http://i46.tinypic.com/2mg87ya.png但我希望2居中，3让右边。我不想将宽度设置为百分比，因为元素中的内容可能会有所不同，这意味着它可能是20/60/20 - 10/80/10 - 33/33/33或其他内容。
如果你可以像这样交换2和3的html位置：
<div id="header-e1">
1 is wider
</div>
<div id="header-e3">
3 is also
</div>
<div id="header-e2">
2 conforms
</div>
然后你可以设置这个css，因为它上面有to "fill" the available space会导致2个overlow: hidden。所以if 1 & 3 expand, 2 narrows（缩小窗口，看看在非常小的尺寸发生了什么）。
#header-e1 {float: left;}
#header-e2 {overflow: hidden;}
#header-e3 {float: right;}
从技术上讲，你可以保持你当前的html顺序和你的float: left在1和2以及make 3 the flex div与overflow: hidden。你could do the same with 1通过完全颠倒html的顺序，并设置2和3到float: right与1有overflow: hidden。对我来说，最好让中间弯曲，但你知道你的应用程序比我更好。
如果您尝试使网站具有响应宽度，您可以尝试以下（33％大约是三分之一）：
#header-e1 {
float: left;
width:33%;
border: 1px solid black;
}
#header-e2 {
float: left;
width:33%;
border: 1px solid black;
}
#header-e3 {
float: left;
width:33%;
border: 1px solid black;
}
您也可以使用固定宽度的div。如果你想要彼此更远，你可以玩他们的左/右边距等希望有帮助！
这是一个没有宽度的编辑：
#wrapper {
position:relative; (add to wrapper)
}
#header-e1 {
position:absolute;
left:0;
border:1px solid black;
}
#header-e2 {
position:absolute;
left:50%;
border:1px solid black;
}
#header-e3 {
position:absolute;
right:0;
border: 1px solid black;
}
您需要在标题中为div添加宽度，并向左浮动header-e3。
注意：它们都具有相同的CSS属性，所以只需给它们像.headerDivs这样的类，然后你就没有重复的代码了
编辑：这是一个工作的jsfiddle：http://jsfiddle.net/eNDPG/
除了使用width: 33%而不是display: inline-block之外，我对使用float: left的RevCocnept建议使用了类似的想法。这是为了避免从页面流中移除div中的#header元素并导致#header的高度变为零。
#header > div {
display: inline-block;
width: 31%;
margin: 5px 1%;
}
你可以这样做：
HTML
<div>
<div id="left">Left</div>
<div id="right">Right</div>
<div id="center">Center</div>
</div>
CSS
#left {
float: left;
border: 1px solid red;
}
#right {
float: right;
border: 1px solid blue;
}
#center {
margin-left: 50px;
margin-right: 50px;
border: 1px solid green;
text-align: center;
}
居中的<div>必须作为HTML代码中的最后一个。
这是一个JS Bin来测试：http://jsbin.com/evagat/2/edit
<style type="text/css">
body {
margin:0;
}
#header {
width:100%;
**strong text**margin:auto;
height:10%;
background-color:red;
}
#left {
width:20%;
float:left;
#margin:auto auto auto auto;
height:100%;
background-color:blue;
}
#right {
float:right;
width:20%;
#margin:auto auto auto auto;
height:100%;
background-color:green;
}
#middle {
position:relative;
left:0;
right:0;
margin:auto;
height:80%;
background-color:yellow;
width:100%;
}
#middle1 {
width: 80%;
margin:auto;
height:45%;
background-color:black;
}
#middle2 {
width: 80%;
margin:auto;
height:40%;
background-color:brown;
}
#middle3 {
width: 80%;
margin:auto;
height:15%;
background-color:orange;
}
#midmain {
width: auto;
margin:auto;
height:100%;
background-color:white;
}
#footer {
width:100%;
margin:auto;
height:10%;
background-color:red;
}
</style>
now check comment for html design.