CSS：将divs左/中/右放置在标题内

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

但我似乎无法获得正确的标题（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>

有人能给我一些建议吗？该结构将用于移动网站。 更新

我上面的代码告诉我：

---

但我希望2在中间，3在右边。我不想将宽度设置为百分比，因为元素中的内容可能会有所不同，这意味着它可能是20/60/20-10/80/10-33/33或其他值。

您需要为标题中的div指定一个宽度，并向左浮动标题e3

注意：它们都有相同的CSS属性，所以只需给它们相同的类，比如.headerDivs，就不会有重复的代码

---

编辑：这里有一个正在工作的JSFIDLE:

如果您试图使站点具有响应宽度，您可以尝试以下方法（33%大约是三分之一）：

也可以为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;
}

---

除了使用

display:inline block

而不是

float:left

之外，我使用了与revcocnett建议的

width:33%

类似的想法。这是为了避免从页面流中删除

#header

中的

div

元素，并导致

#header

的高度变为零

#header > div {
    display: inline-block;
    width: 31%;
    margin: 5px 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>

---

从技术上讲，您可以在1和2上保持当前html顺序和

float:left

，并使用

overflow:hidden

。您可以完全颠倒html的顺序，并将2和3设置为

float:right

，其中1具有

overflow:hidden

。在我看来，最好使用中间的flex，但您比我更了解您的应用程序。

您可以这样做：

HTML

<div>
    <div id="left">Left</div>
    <div id="right">Right</div>
    <div id="center">Center</div>
</div>

居中的

必须作为

HTML

代码中的最后一个

这里有一个JS Bin要测试：

身体{
保证金：0；
}
#标题{
宽度：100%；
**强文本**页边距：自动；
身高：10%；
背景色：红色；
}
#左{
宽度：20%；
浮动：左；
#保证金：自动；
身高：100%；
背景颜色：蓝色；
}
#对{
浮动：对；
宽度：20%；
#保证金：自动；
身高：100%；
背景颜色：绿色；
}
#中间的{
位置：相对位置；
左：0；
右：0；
保证金：自动；
身高：80%；
背景颜色：黄色；
宽度：100%；
}
#中间1{
宽度：80%；
保证金：自动；
身高：45%；
背景色：黑色；
}
#中间2{
宽度：80%；
保证金：自动；
身高：40%；
背景颜色：棕色；
}
#中间3{
宽度：80%；
保证金：自动；
身高：15%；
背景颜色：橙色；
}
#中脉{
宽度：自动；
保证金：自动；
身高：100%；
背景色：白色；
}
#页脚{
宽度：100%；
保证金：自动；
身高：10%；
背景色：红色；
}
现在检查html设计的注释。

看看这篇文章：我本来不理解你的问题，但后来你用油漆张贴了布局，一切都很好。；）谢谢，但是我不想设置每个元素的宽度。这可能吗？嗯……我不确定宽度如何与你的内容配合，但我想你可以尝试绝对定位。我为你修改了上面的答案。谢谢，但我不想设置每个元素的宽度。有可能吗？@user1539208我不知道有什么简单的方法，如果你想让所有子

div

的宽度以及两者之间的空间加起来等于

#header

的宽度的话。这将取决于每个的宽度如何变化（是什么导致宽度不同），以及

#header

或

#wrapper

是否具有固定的宽度。不确定是否可以单独使用CSS来实现这一点。也许有一种方式我只是不知道，在这种情况下，我也很想听听。这是一个很好的解决方案。但我有个问题。e2已满，e3已超出边界。@codebrain:您需要描述您的问题（或用小提琴加以说明），因为我不知道您所说的“e3已超出边界”是什么意思。E1和e2放在容器内，e3已超出容器外。

<div id="header-e1">
    1 is wider
</div>
<div id="header-e3">
    3 is also
</div>
<div id="header-e2">
    2 conforms
</div>

<div>
    <div id="left">Left</div>
    <div id="right">Right</div>
    <div id="center">Center</div>
</div>

#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;
}

                        <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.