我一直在尝试创建一个具有以下结构的网站：
desired structure http://i50.tinypic.com/vhw076.png
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或其他。
解决方法
Utilize the Magic of Overflow: Hidden
如果你可以把html的位置换成2& 3喜欢这样：
<div id="header-e1">
1 is wider
</div>
<div id="header-e3">
3 is also
</div>
<div id="header-e2">
2 conforms
</div>
然后你可以设置这个css，这将导致2 to “fill” the available space因为overlow：隐藏在它上面。所以if 1 & 3 expand,2 narrows(缩小窗口，看看真的很小的尺寸会发生什么)。
#header-e1 {float: left;}
#header-e2 {overflow: hidden;}
#header-e3 {float: right;}
从技术上讲，你可以保持当前的html顺序和你的浮动：留在1& 2和make 3 the flex div带溢出：隐藏。你could do the same with 1通过完全反转html的顺序，并设置2& 3浮动：右，1有溢出：隐藏。对我来说，似乎最好有中间的弯曲，但你知道你的应用比我更好。
