CSS 2流体1固定列

Question

我正试图实现这种布局。

1. 左栏固定大小

2. 右栏流体，它可以具有元素x个内，例如高达4分格50像素宽（这是动态地完成），所以它必须是最大200像素宽，或如果它具有3个这样的元素，那么它必须是150像素宽...

3. 中心柱流体，需要所有的休息空间

最接近予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，如果它会更容易达到预期的效果。

Answer 1

您可以用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>