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

Question

我需要一个中心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>

Answer 1

Flexbox可以做到这一点：

＆＃13;

＆＃13;

    #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;
    }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;