평등 높이 CSS 열

Question

HTML :

<div id="container1"> 
    <div id="col1">Column 1<br/>2</div> 
    <div id="col2">Column 2</div> 
    <div id="col3">Column 3</div> 
</div> 

CSS :

#container1 { 
    float:left; 
    width:100%; 
} 
#col1 { 
    float:left; 
    width:30%; 
    background:red; 
} 
#col2 { 
    float:left; 
    width:40%; 
    background:yellow; 
} 
#col3 { 
    float:left; 
    width:30%; 
    background:green; 
} 

이 더 복잡 데모 페이지입니다,하지만 난에 대한 첫 번째 예제를 사용하는 찾고 있어요 내 목적. 예제가 작동하지 않는 이유는 무엇입니까?

http://jsfiddle.net/YryJM/2/

Answer 1

동일한 높이 열 간단한 방법은 display: table으로한다.

#container1 { 
    display: table; 
    width:100%; 
} 

#col1, #col2, #col3 { 
    display: table-cell; 
} 
#col1 { 
    width:30%; 
    background:red; 
} 
#col2 { 
    width:40%; 
    background:yellow; 
} 
#col3 { 
    width:30%; 
    background:green; 
} 

http://jsfiddle.net/YryJM/3/

Answer 2

어쩌면이 작동합니까? 컨테이너 div의 고정 높이를 설정하고 col div를 100 %로 설정하면됩니까? 이 당신을 도울 또는하지 않을 경우

#container1 { 
float:left; 
width:100%; 
height:50px; 
} 
#col1 { 
float:left; 
width:30%; 
background:red; 
height:100%; 
} 
#col2 { 
float:left; 
width:40%; 
background:yellow; 
height:100%; 
} 
#col3 { 
float:left; 
width:30%; 
background:green; 
height:100%; 
} 

예를 http://jsfiddle.net/squinny/dps4f/1/

는 나도 몰라?