Question

我的页面上有3个我想要彼此相邻的div。如果容器的宽度为700px，则它们都连接良好。但我想在我的容器上最大宽度为800px。在这种情况下，我想让所有的div都空出来（左边第一个div，中间第二个div，右边第三个div）。我需要将这些div与我有的2个间隔器连接起来（1个连接div 1和2.另一个连接2和3）。

一旦我实现了这一点，我希望第二个div（内容）浮动在第一个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>

Answer 2

您应该使用百分比来实现：

.bg-left {
    height: 190px;
    width: calc( 100% / 3 - 1px );
    background: url(images/left-1.png);
}

对于间隔物，这种方式.bg-left的宽度为-1.3x，为33.3％。

DEMO：http://jsfiddle.net/6aor5u4m/

彼此有3个div，中间有间隔物

2 个答案:

JSFiddle - DEMO