CSS 열이 동일한 높이를 유지합니다

Question

일부 CSS에서 3 개의 열을 갖도록 설정하려고합니다.

중간 및 오른쪽 열에 텍스트를 포함 할 수 있습니다. 가운데 열이 텍스트를 줄 바꿈하고 다른 모든 열은 해당 열을 기준으로 크기가 조정되도록 현재 설정되어 있습니다. 같은 방식으로 다른 열에 영향을 주려면 오른쪽 열이 필요합니다. 나는 CSS 전문가가 아니며 C#을 주로 사용한다.

다른 솔루션을 시도했으며 이것이 내가 원하는 바를 가깝게합니다. 이견있는 사람?

지금까지 CSS :

#outer 
{ 
    width: 100%; 
    margin: auto; 
    padding:0; 
} 

#leftcolumn 
{ 
position: absolute; 
height: 100%; 
width: 5px; 
-webkit-border-radius: 0px;  
margin: 0 ; 
background-color: Yellow; 
z-index:10;  
left:0px; 
top:0; 
} 

#rightcolumn 
{ 
position: absolute; 
height: 100%; 
width: 75px; 
-webkit-border-radius: 0px;  
margin: 0 ; 
background-color: green; 
right:0px; 
top:0; 
} 

#middlecolumn 
{ 
-webkit-border-radius: 0px;  
margin-left:5px; 
margin-right:75px; 
background-color: #62A9FF; 
left:0px; 
top:0px; 
} 

#inner 
{ 
width:100%; 
margin:0 auto;  
position: relative; 
-webkit-transform: rotate(0deg); 
-webkit-transform-origin:50% 50%; 
} 

http://jsfiddle.net/6eshT/15/

Answer 1

display: table-cell;을 사용하면 매우 편리합니다.

Answer 2

난 당신이 바로 CSS와 함께이 작업을 수행 할 수 있다고 생각하지 않습니다,하지만 당신은 아주 쉽게이를 달성하기 위해 jQuery를 사용할 수 있습니다. http://jsfiddle.net/6eshT/8/

는 기본적으로, 같은 클래스 이름을 가지고 모든 열을 설정 : 여기

는 바이올린입니다. 최소한 하나의 공통 클래스를 가져야합니다. 즉, class="col somethingElse" "somethingElse"는 각 열의 스타일을 지정하는 클래스가 될 수 있습니다.

jQuery를은 다음과 같습니다

$('document').ready(function(){ 
    var max = -1; 
    $(".col").each(function() { 
     var h = $(this).height(); 
     max = h > max ? h : max; 
    }); 
    $(".col").css({ 'height' : max }) 
}); 

Answer 3

가장 쉬운 방법은 모두 같은 높이가 가짜 열 함께 여러 열을 만들 수 있습니다. http://line25.com/articles/create-sidebars-of-equal-height-with-faux-columns

Answer 4

당신은 디스플레이를 사용할 수 있습니다 훌륭한 솔루션 인이 http://css-tricks.com/snippets/css/a-guide-to-flexbox/