CSS 2 유체 1 고정 열

Question

이 레이아웃을 달성하려고합니다.

1. 왼쪽 열 고정 크기

2. 오른쪽 열 유체, 그것은 예를 들면 최대 4 div가 (이 동적으로 수행된다) 폭 50 픽셀, 내부 소자 (X)의 개수를 가질 수있다 그래서 200 픽셀 폭 최대 있어야 이 3 개 등의 요소가있는 경우, 또는, 다음은

3. 가운데 열 유체 ... 폭 150 픽셀이어야은

가장 가까운 내가 하 나머지 모든 공간이 필요 제공했습니다 것은 이것이다 :

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