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

【问题标题】：Three colums, 2 width depends on inside elements and the middle depends on other two三列，2个宽度取决于内部元素，中间取决于其他两个
【发布时间】：2015-12-14 09:34:26
【问题描述】：

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

<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>

【问题讨论】：

标签： html css variables width multiple-columns

【解决方案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>

【讨论】：