CSS:在标题内放置div左/中/右

Question

我一直在尝试创建一个具有以下结构的站点:
所需的结构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

我上面的代码给了我这个: 当前的结果http://i46.tinypic.com/2mg87ya.png 但是我希望2居中,3让右边.我不想将宽度设置为百分比,因为元素中的内容可能会有所不同,这意味着它可能是20/60/20 - 10/80/10 - 33/33/33或其他内容.

Answer 1

利用溢出的魔力:隐藏

如果你可以像这样交换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,这将导致2 "补"的可用空间,因为的overlow: hidden就可以了.因此,如果1和3展开,2缩小(缩小窗口以查看在非常小的尺寸下发生的情况).

#header-e1 {float: left;}
#header-e2 {overflow: hidden;}
#header-e3 {float: right;}

从技术上讲,你可以保留当前的HTML为了和你的float: left两个1,2及使3柔性DIV用overflow: hidden.您可以通过完全颠倒html的顺序并将2和3设置为float: right1来完成相同的操作overflow: hidden.对我来说,最好让中间弯曲,但你知道你的应用程序比我更好.

Answer 2

如果您正在尝试使网站具有响应式宽度，您可以尝试以下操作（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;
}