유연한 영역에있는 세 개의 유연한 (백분율) 열

Question

고정 너비 메뉴 외에도 외부 상자의 너비가 33 % 인 divbox의 열 3 개를 정렬해야합니다.

http://jsfiddle.net/uvw5c/1/

그래서 나는 빨간색, 노란색, 녹색 영역은 #menu의 폭 어떤 경우에, 주황색 메뉴를 beides합니다. 어떤 힌트를 사전에

<div id="container"> 
    <div id="menu"> 
     menu 
    </div> 
    <div id="dialogbox"> 
     <div id="outer"> 
     <div class="inner" style="background-color:red;"> 
      col1 
     </div> 
     <div class="inner"> 
      col2 
     </div> 
     <div class="inner" style="background-color:green;"> 
      col3 
     </div> 
     </div> 
    </div> 
</div> 

​ 
#container{ 
    width:500px; 
    background-color:grey; 
    height:300px; 
} 
#menu{ 
    width:300px; 
    float:left; 
    height:100%; 
    background-color:orange; 
} 

#dialogbox{ 
    float:left; 
    height:100%; 
    width:100%; 
} 
#outer{  
    background-color:blue; 
    height:300px; 
    margin: 0 auto; 
    padding:0; 
    width:100%; 
} 

.inner{ 
    padding:0; 
    margin:0; 
    width:33%; 
    background-color:yellow; 
    height:100%; 
    float:left; 
} 
​ 

감사합니다!

Answer 1

이 특정 사례의 경우 많은 마크 업을 제거하고 display: table; 및 table-cell;을 사용할 수 있습니다. 메뉴의 너비를 설정하면 나머지는 자동으로 나머지를 똑같이 채 웁니다.

HTML :

<div id="container"> 
    <div id="menu"> 
     menu 
    </div> 
    <div class="inner" style="background-color:red;"> 
      test 
    </div> 
    <div class="inner"> 
      test 
    </div> 
    <div class="inner" style="background-color:green;"> 
      test 
    </div> 
</div> 
​ 

CSS :

#container{ 
    width:500px; 
    display: table; 
    height: 300px;  
} 
#menu{ 
    width: 100px; 
    background: #00f; 
    display: table-cell; 
} 

.inner{ 
    padding:0; 
    margin:0; 
    background-color:yellow; 
    height:100%; 
    display: table-cell;   
} 

바이올린 : http://jsfiddle.net/Kyle_Sevenoaks/uvw5c/5/

Answer 2

메뉴와 .inner 요소를 모두 포함 사업부를 확인합니다. 또한 나는 친구의 도움으로 해결책을 찾을 33.3 %와 (아마도 중간에 하나) 하나 개의 요소

Answer 3

에 33.4 %이어야 내부의 폭을 확인하십시오

http://jsfiddle.net/t39yV/2/

을 그 # 다이얼로그 박스에서 마진을 남기고 사용하는 것이 현명합니다.)

#container{ 
    width:100%; 
    background-color:grey; 
    height:300px; 
} 
#menu{ 
    width:100px; 
    float:left; 
    height:100%; 
    background-color:orange; 
} 

#dialogbox{ 
    margin-left:100px; 
    height:100%; 
} 
#outer{  
    background-color:blue; 
    height:300px; 
    margin: 0 auto; 
    padding:0; 
    width:100%; 
} 

.inner{ 
    padding:0; 
    margin:0; 
    width:33.3%; 
    background-color:yellow; 
    height:100%; 
    float:left; 
}