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

Question

我正在处理我的项目。 我想要3个div在一行和固定位置..

• 重复第一个div x
• 第二个div在中间
• 最后一个div重复x。

我希望我的输出是这样的：

http://jsfiddle.net/9o22xe2x/

<div class="header-fixed">
    <div class="header-bg1"></div>
    <div class="header-logo"></div>
    <div class="header-bg2"></div>
</div>

CSS

.header-fixed{
position: fixed;
top: 0;
width: 100%;
}
.header-bg1{
background:url('images/header-bg1.png') repeat-x;
height: 88px;
left: 469px;
display: block;
}
.header-bg2{
background:url('images/header-bg2.png') repeat-x;
height: 128px;
left: 469px;
display: block;
}
.header-logo{
background:url('images/header-logo.png') no-repeat;
width: 469px;
height: 128px;
}

Answer 1

将以下内容添加到您的CSS中：

.header-fixed div {
  float: left;
  clear: none;
}

然后在HTML中将其称为：

<div class="header-fixed">
  <div class="header-bg1"></div>
  <div class="header-logo"></div>
  <div class="header-bg2"></div>
</div>

试试看！

Answer 2

使用display: inline-block即可：

1. 将该样式添加到 child divs：

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

2. Remove whitespace between those divs。请注意小提琴中的评论 HTML 。

3. 为第一个和第三个孩子div添加一些宽度，例如：

   .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 */
   }
   

   caniuse CSS calc()

JSFiddle

注意：我已将margin: 0添加到body以删除默认margin。

Answer 3

这是一个简单的实现，包含2行HTML和少量简单的CSS：

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

• 徽标是标题中的图片。

• 第二个背景位于标题的伪元素上，其位置为position: absolute和left: (logo width) / top: 0;。

经过测试和使用Chrome，Firefox和IE 9 +（IE 8甚至IE 6和7都可以修改）

实施例

注意：已移除正文上的默认边距以防止出现间隙。

＆＃13;

＆＃13;

body {
  background: #D3BC00 url('http://i.imgur.com/tZR9xWD.png') repeat-x;
  margin: 0;
}
header {
  position: relative;
  background: #D3BC00;
  width: 500px;
  /* smallest size is logo width */
  margin: 0 auto;
}
header:before {
  content: '';
  display: block;
  height: 100%;
  background: #D3BC00 url('http://i.imgur.com/GkQQ4PF.png') repeat-x;
  position: absolute;
  width: 100%;
  top: 0;
  left: 469px;
  /* logo width */
}

＆＃13;

<header>
  <img class="logo" src="http://i.imgur.com/m3EiiKN.png" />
</header>

＆＃13;

＆＃13;

＆＃13;