CSS 2流体1固定柱

Question

我正在努力实现这种布局。

1. 左列固定大小
2. 右列流体，内部可能有x个元素，例如最多4个div 50px宽（这是动态完成的）所以它必须是最大200px宽，或者如果它有3个这样的元素，那么它必须是150px宽。 ..
3. 中心柱流体，占用所有剩余空间

我最接近的是：

#container {
    overflow:hidden;
    width: 100%;
}

#leftcol {
    border: 1px solid #0f0;
    float: left;
    width: 80px;
}

#rightcol {
    border: 1px solid #0f0;
    float: right;
   
}

#centercol {
    border: 1px solid #000;
    margin-left: 80px;

}
.box{
  width:50px;
  height:20px;
  background:red;
  float:left;
}

<div id="container">

  <div id="leftcol">
    fixed 80px
  </div>
  <div id="rightcol">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
  </div>
  <div id="centercol">
    fluid center
  </div>

</div>

但中心液体宽度不正确。

我可以更改一些HTML，如果它更容易达到预期的效果。

Answer 1

您可以使用Flexbox执行此操作：

body {margin: 0}

#container {
  display: flex; /* displays flex-items (children) inline */
  overflow: hidden;
}

#leftcol {
  border: 1px solid #0f0;
  width: 80px;
}

#centercol {
  flex: 1; /* takes the remaining horizontal space */
  border: 1px solid #000;
}

#rightcol {
  display: flex;
  border: 1px solid #0f0;
  max-width: 200px; /* adjust to your needs */
}

.box {
  width: 50px;
  height: 20px;
  background: red;
}

<div id="container">
  <div id="leftcol">
    fixed 80px
  </div>
  <div id="centercol">
    fluid center
  </div>
  <div id="rightcol">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
  </div>
</div>