CSS：将div左/中/右放在头文件中

我一直在尝试创建一个具有以下结构的网站：
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有溢出：隐藏。对我来说，似乎最好有中间的弯曲，但你知道你的应用比我更好。

原文地址：https://www.jb51.cc/css/218815.html