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

Question

我一直在尝试创建一个具有以下结构的网站:

但我似乎无法正确设置页眉(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;
}

有人可以告诉我可以做什么吗？该结构将用于移动网站。

更新

我上面的代码给了我这个: 但我希望 2 居中，3 在右侧。我不想将宽度设置为百分比，因为元素中的内容可能会有所不同，这意味着它可能是 20/60/20 - 10/80/10 - 33/33/33 或其他。

Answer 1

Utilize the Magic of Overflow: Hidden

如果你可以像这样交换 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 to "fill" the available space因为上面有 overlow: hidden。所以if 1 & 3 expand, 2 narrows (缩小窗口以查看在非常小的尺寸下会发生什么)。

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

从技术上讲，您可以在 1 & 2 和 make 3 the flex div 上保留当前的 ​​html 顺序和 float: left使用 溢出:隐藏。你could do the same with 1通过完全颠倒 html 的顺序并将 2 和 3 设置为 float: right，其中 1 具有 overflow: hidden。对我来说，中间 flex 似乎是最好的选择，但您比我更了解您的应用程序。