동일한 높이의 박스에 대한 우아한 솔루션

Question

나는 각기 다른 내용의 상자가 세 개 있습니다. 그들은 같은 높이가 아닙니다. 동적으로 미래에 대한 동적 아니기 때문에 내가 최대 높이를 사용하지 선호하는 모든 상자

에 같은 높이를 생산하는 절대 위치를 포함하지 않는 우아한 해결책이 있습니까.

Answer 1

당신은 디스플레이 테이블 사용할 수 있습니다

<div style='display: table; color: #fff; width: 100%'> 
    <div style='display: table-cell; background:red;'> 
     <p>Hi</p> 
    </div> 
    <div style='display: table-cell; background:green'> 
     <p>Hi</p> 
     <p>Hi</p> 
     <p>Hi</p> 
     <p>Hi</p> 
    </div> 
    <div style='display: table-cell; background:blue'> 
     <p>Hi</p> 
    </div> 
</div> 

http://jsfiddle.net/nofmdho4/

Answer 2

은 다음과 같이 테이블 레이아웃을 시도해보십시오

#css-table { 
 
    display: table; 
 
} 
 
#css-table .col { 
 
    display: table-cell; 
 
    width: 25%; 
 
    padding: 10px; 
 
} 
 
#css-table .col:nth-child(even) { 
 
    background: #ccc; 
 
} 
 
#css-table .col:nth-child(odd) { 
 
    background: #eee; 
 
}

<div id="css-table"> 
 
    <div class="col"> 
 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
 
    </div> 
 
    <div class="col"> 
 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. 
 
     Mauris placerat eleifend leo.</p> 
 
    </div> 
 
    <div class="col"> 
 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
 
    </div> 
 
    <div class="col"> 
 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. 
 
     Mauris placerat eleifend leo.</p> 
 
    </div> 
 
</div>

Answer 3

타겟팅하는 경우에만 현대적인 브라우저의 , 가장 많은 elegan 이 문제를 해결하는 방법은 flexbox를 사용하는 것입니다. 예를 들어 :

<div style='display: flex; flex-direction: row; color: #fff;'> 
    <div style='flex: 1; background:red;'> 
     <p>Hi</p> 
    </div> 
    <div style='flex: 1; background:green'> 
     <p>Hi</p> 
     <p>Hi</p> 
     <p>Hi</p> 
     <p>Hi</p> 
    </div> 
    <div style='flex: 1; background:blue'> 
     <p>Hi</p> 
    </div> 
</div> 

http://jsfiddle.net/nofmdho4/1/