Html CSS 2个div重复，中间一个div

我正在做我的项目。 我想让3个div在一条直线上固定

• 第一个div重复x
• 第二组在中间
• 最后一个div是重复的x

我希望我的输出如下：

在css中添加以下内容：

.header固定div{
浮动：左；
明确：无；
}

使用

显示：内联块

可以执行以下操作：

将该样式添加到子

divs

：

.header-fixed>div{
    display:inline-block;
    vertical-align: top;
}

。请注意小提琴中已注释的HTML

为第一个子项和第三个子项添加一些宽度，如：

.header-bg1, .header-bg2{
    width: calc((100% - 469px)/2);
    /* 100% of parent width minus the logo width divided */
    /* with 2 will put the same width for the first and third child */
    /* and center the logo */
}

---

注意：我在

正文中添加了
margin:0
，以删除默认的
margin
，下面是一个简单的实现，包含两行HTML和少量简单CSS：


第一个背景是身体上的背景图像

徽标是标题中的图像

第二个背景位于标题的伪元素上，该元素的位置为
位置：绝对
和
左侧：（徽标宽度）
/
顶部：0


经过测试并运行的Chrome、Firefox和IE9+（IE8甚至IE6和IE7都可以修改）

实例
注意：主体上的默认边距已删除，以防止出现间隙


正文{
背景：#D3BC00 url（'http://i.imgur.com/tZR9xWD.png“）重复-x；
保证金：0；
}
标题{
位置：相对位置；
背景：#D3BC00；
宽度：500px；
/*最小尺寸为徽标宽度*/
保证金：0自动；
}
标题：之前{
内容：''；
显示：块；
身高：100%；
背景：#D3BC00 url（'http://i.imgur.com/GkQQ4PF.png“）重复-x；
位置：绝对位置；
宽度：100%；
排名：0；
左：469px；
/*标志宽度*/
}

您可以添加JSFIDLE吗？注意：您可以使用CSS渐变来实现这一点。另外，要使
div
在一行中，您必须
float
它们，或者使用
inline block
。您必须为单行中的所有div使用float:left。您可能需要为不包含徽标的每个div应用宽度。另外，float或display:inline块将强制它们全部位于一行上。我忍不住觉得这太复杂了，难道你不能用一张图片作为背景，然后正确地定位你的标志吗？我想你的答案没有显示出来
.header-fixed>div{
    display:inline-block;
    vertical-align: top;
}

.header-bg1, .header-bg2{
    width: calc((100% - 469px)/2);
    /* 100% of parent width minus the logo width divided */
    /* with 2 will put the same width for the first and third child */
    /* and center the logo */
}