CSS 2流体1固定柱答案

【问题标题】：CSS 2 fluid 1 fixed columnCSS 2流体1固定柱
【发布时间】：2017-11-17 22:13:11
【问题描述】：

我正在尝试实现这种布局。

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

我最接近的是：

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

【问题讨论】：

标签： html css responsive-design

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

【讨论】：