CSS 2流体1固定列
问题描述：
我正试图实现这种布局。CSS 2流体1固定列
左栏固定大小
右栏流体，它可以具有元素x个内，例如高达4分格50像素宽（这是动态地完成），所以它必须是最大200像素宽，或如果它具有3个这样的元素，那么它必须是150像素宽...
中心柱流体，需要所有的休息空间
最接近予HA已经来是这样的：
#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，如果它会更容易达到预期的效果。
答
您可以用Flexbox的做到这一点：
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}
#container {
display: flex; /* displays the children inline, no need to use floats */
overflow: hidden;
}
#leftcol {
border: 1px solid #0f0;
width: 80px;
}
#centercol {
flex: 1; /* takes the remaining space */
border: 1px solid #000;
}
#rightcol {
display: flex; /* displays the children inline */
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>