html - Div 宽度等于其他两个 div 之间的间隙

Question

我在一个容器中有几个 div，排列成一行。

$(document).ready(function() {
  $('#swap').click(function() {
    $('#container').find('div.blue').each(function() {
      $(this).removeClass('blue');
      $(this).addClass('green');
    });
  });
});

#container {
  border: 1px solid black;
  border-right: 0px;
  width: 500px;
  min-height: 40px;
}
#left {
  float: left;
}
#right {
  float: right;
}
.purple {
  background-color: #9471AB;
  width: 70px;
}
.red {
  background-color: #D48A8A;
  width: 40px;
}
.green {
  background-color: #A4B995;
  width: 50px;
}
.blue {
  background-color: #95AEB9;
  width: 75px;
}
.red,.green,.blue,.purple {
  height: 40px;
  float: left;
  box-sizing: border-box;
  border-right: 1px black solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
  <div id="left">
    <div class="purple">
    </div>
    <div class="purple">
    </div>
    <div class="purple">
    </div>
  </div>
  <div id="middle">
    <div class="red">
    </div>
  </div>
  <div id="right">
    <div class="blue">
    </div>
    <div class="blue">
    </div>
    <div class="green">
    </div>
  </div>
</div>
<br/>
<button id="swap">Swap</button>

.purple、.blue、.green 是定义的宽度，但不是 .red。对于这个例子，我给了它一个宽度。

我希望 .red 的宽度等于 #left 和 #right 之间的间隙。我可以将它放在所有这些下方并使宽度等于容器宽度，但我正在寻找对文本友好的内容。

我放置了一个按钮，将所有 .blue 更改为 .green。 .red 应该相应地拉伸(stretch)它的宽度，这样就没有间隙了。有的场景右边可能有2个.green和1个.blue，有的可能是3个.blue或者3个.green.等。它应该是动态的，而不是根据其他类的宽度计算。

Answer 1

flexbox 解决方案

$(document).ready(function() {
  $('#swap').click(function() {
    $('#container').find('div.blue').each(function() {
      $(this).removeClass('blue');
      $(this).addClass('green');
    });
  });
});

* {
  box-sizing: border-box;
}

#container {
  border: 1px solid black;
  border-right: 0px;
  width: 500px;
  margin: 10p auto;
  display: flex;
  justify-content: space-between;
}

#left {
  display: flex;
}
#middle {
  display: flex;
  flex:1;
}

#right {
  display: flex;
}
.purple {
  background-color: #9471AB;
  width: 70px;
}
.red {
  background-color: #D48A8A;
  flex:1;
}
.green {
  background-color: #A4B995;
  width: 50px;
}
.blue {
  background-color: #95AEB9;
  width: 75px;
}
.red,.green,.blue,.purple {
  height: 40px;
  border-right: 1px black solid;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="left">
    <div class="purple">
    </div>
    <div class="purple">
    </div>
    <div class="purple">
    </div>
  </div>
  <div id="middle">
    <div class="red">
    </div>
  </div>
  <div id="right">
    <div class="blue">
    </div>
    <div class="blue">
    </div>
    <div class="green">
    </div>
  </div>
</div>
<br/>
<button id="swap">Swap</button>