절대적으로 배치 된 요소가있는 높이가 같은 열

Question

내용과 버튼이 약간있는 정렬되지 않은 목록이 있습니다. 열 (LI)이 항상 같은 높이가되는 것은 아니지만 단추가 항상 맨 아래에 있도록하고 싶습니다. 디스플레이를 사용하고 있습니다 : 테이블/디스플레이 : LI를 같은 높이로 유지하기 위해 테이블 ​​셀 트릭을 사용합니다. 그러나 버튼을 올바르게 정렬 할 수 없습니다. 아래쪽에 단추가 있어야하지만 내용이 그러 하듯이 단추가 작동되기를 원합니다. 의미는 브라우저의 크기가 조정됨에 따라 중앙에 배치하고 너비를 변경하려고합니다.

다음은이 문제를 보여주는 바이올린입니다. 이 같은 .rewards .reward .redeem 클래스 position: relative;이 내가 동일한 높이를하고 있어요 방법을 보여주는 코드 조각입니다

http://jsfiddle.net/mattymess/BBuqY/

...

.rewards .rewards-chooser { 
    margin: 0; 
    border-top: 2px solid #f4f4f4; 
    border-bottom: 2px solid #f4f4f4; 
    display: table; 
    width: 100%; 
    position: relative; 
} 
.rewards .reward { 
    width: 25%; 
    border-left: 2px solid #f4f4f4; 
    list-style: none; 
    display: table-cell; 
} 

Answer 1

변경 position: absolute; :

.rewards .reward .redeem { 
    position: relative; 
    bottom: 0; 
    box-sizing: border-box; 
} 

그냥 지식 : 귀하의 버튼은 뭔가 (귀하의 컨테이너), 절대적이지 않다.

같은 줄에 단추를 설정하려면 컨테이너 범위의 높이를 정의해야합니다. 다음과 같은 내용 :

.reward-description { 
    height: 200px; 
} 

나는 당신을 위해 깨끗한 모범을 보였습니다. 보시려면 click here (jsFiddle)입니다.