html - 彼此有 3 个 div，中间有间隔符

Question

我有 3 个 div，我希望它们在我的页面上彼此相邻。如果容器的宽度为 700px，则它们都连接良好。但我希望容器的最大宽度为 800px。在那种情况下，我希望我所有的 div 间隔开(第一个 div 在左边，第二个 div 在中间，第三个 div 在右边)。我需要将这些 div 与我得到的 2 个垫片连接(1 个用于连接 div 1 和 2。另一个用于连接 2 和 3)。

完成后，我希望第二个 div(内容) float 在第一个 div(背景)之上。但我已经做到了。

我尝试了一些方法，但我找不到解决方案，如果有人能帮助我，我将不胜感激!

这是我的代码片段:

* {
  margin: 0;
  padding: 0;
}
.container {
  width: 800px;
  margin: 0 auto;
  background: #efefef;
  height: 800px;
}
.content {
  position: relative;
  z-index: 100;
  top: 0;
}
.background {
  position: absolute;
  z-index: 0;
  top: 0;
  width: inherit;
}
.bg-left {
  height: 190px;
  width: 268px;
  background: url(images/left-1.png);
  float: left;
}
.bg-left-spacer {
  height: 190px;
  width: 1px;
  background: url(images/left-spacer.png);
  float: left;
}
.bg-connector {
  height: 190px;
  width: 133px;
  background: url(images/connector.png);
  float: left;
  margin: 0 auto;
}
.bg-right-spacer {
  height: 190px;
  min-width: 1px;
  background: url(images/right-spacer.png);
  float: left;
  background-repeat: repeat-x;
}
.bg-right {
  height: 190px;
  width: 297px;
  background: url(images/right-1.png);
  float: left;
}

<div class='container'>
  <div class='content'>
    <h1>testheader</h1>
    <p>testtext</p>
  </div>
  <div class='background'>
    <div class='bg-left'></div>
    <div class='bg-left-spacer'></div>
    <div class='bg-connector'></div>
    <div class='bg-right-spacer'></div>
    <div class='bg-right'></div>
  </div>
</div>

Answer 1

你可以这样实现:

JSFiddle - DEMO

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container {
    position: relative;
    min-width: 700px;
    max-width: 800px;
    margin: 0 auto;
    background: #efefef;
    height: 800px;
}
.content {
    position: relative;
    z-index: 100;
    top: 0;
}
.background {
    position: absolute;
    width: 100%;
    z-index: 0;
    top: 0;
    display: table;
    table-layout: fixed;
}
.bg-left {
    height: 190px;
    width: 268px;
    background: url(images/left-1.png);
    border: 1px solid #000;
    display: table-cell;
}
.bg-connector {
    height: 190px;
    width: 133px;
    background: url(images/connector.png);
    border: 1px solid #000;
    display: table-cell;
}
.bg-right {
    height: 190px;
    width: 297px;
    background: url(images/right-1.png);
    border: 1px solid #000;
    display: table-cell;
}
.space {
    display: table-cell;
    width: 100%;
    height: 190px;
    background: #F00;
}

<div class='container'>
    <div class='content'>
         <h1>testheader</h1>
         <p>testtext</p>
    </div>
    <div class='background'>
        <div class='bg-left'></div>
        <div class="space"></div>
        <div class='bg-connector'></div>
        <div class="space"></div>
        <div class='bg-right'></div>
    </div>
</div>