三列，2个宽度取决于内部元素，中间取决于其他两个

Question

我需要一个中锋div"fill"剩下的space其他两个。 1. 左右列的宽度取决于其中元素的数量。 2.左必在左，右必在右。 3.中心有4个元素，它们的宽度取决于父宽度（#center width） 4.中心宽度必须填满剩余space。谢谢！！

<div id="container">
    <div id="left">
        <div class="elementInLeft"></div>
        <div class="elementInLeft"></div>
        <div class="elementInLeft"></div>
        <div class="elementInLeft"></div>
    </div>
    <div id="center">
        <div class="elementInCenter">1</div>
        <div class="elementInCenter">2</div>
        <div class="elementInCenter">3</div>
        <div class="elementInCenter">4</div>
    </div>
    <div id="right">
        <div class="elementInRight"></div>
        <div class="elementInRight"></div>
        <div class="elementInRight"></div>
        <div class="elementInRight"></div>
        <div class="elementInRight"></div>
        <div class="elementInRight"></div>
    </div>
</div>
<style>
    #container
    {
        width: 100%;
    }
    #left
    {
        float: left;
    }
    .elementInLeft
    {
        width: 20px;
        height: 20px;
        margin-left: 2px;
        background: #F00;
        float: left;
    }
    #center
    {
        float: left;
    }
    .elementInCenter
    {
        width: 25%;
        height: 20px;
        text-align: center;
        float: left;
        background: #0F0;
    }
    #right
    {
        float: right;
    }
    .elementInRight
    {
        width: 20px;
        height: 20px;
        margin-left: 2px;
        background: #00F;
        float: left;
    }
</style>

Answer 1

Flexbox 可以做到这一点：

    #container {
      display: flex;
    }
    .elementInLeft {
      width: 20px;
      height: 20px;
      margin: 0 2px;
      background: #F00;
      float: left;
    }
    #center {
      flex: 1;
      display: flex;
    }
    .elementInCenter {
      height: 20px;
      text-align: center;
      flex: 1;
      border: 1px solid grey;
      background: #0F0;
    }
    .elementInRight {
      width: 20px;
      height: 20px;
      margin: 0 2px;
      background: #00F;
      float: left;
    }

<div id="container">
  <div id="left">
    <div class="elementInLeft"></div>
    <div class="elementInLeft"></div>
    <div class="elementInLeft"></div>
    <div class="elementInLeft"></div>
  </div>
  <div id="center">
    <div class="elementInCenter">1</div>
    <div class="elementInCenter">2</div>
    <div class="elementInCenter">3</div>
    <div class="elementInCenter">4</div>
  </div>
  <div id="right">
    <div class="elementInRight"></div>
    <div class="elementInRight"></div>
    <div class="elementInRight"></div>
    <div class="elementInRight"></div>
    <div class="elementInRight"></div>
    <div class="elementInRight"></div>
  </div>
</div>

三列，2个宽度取决于内部元素，中间取决于其他两个

Three colums, 2 width depends on inside elements and the middle depends on other two

html

css

variables

width

multiple-columns