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>