아래에서부터 수직으로 정렬하는 요소

Question

필자가 평준화하려는 몇 가지 요소가 있습니다. 이를 위해 가장 큰 높이를 읽고 모든 요소에 설정하는 기본 함수를 사용합니다.

각 요소에는 몇 가지 내부 요소가 있습니다. 이 내부 요소 중 마지막 요소는 맨 아래에 수직으로 맞추고 싶습니다.

-------MainElement------ 
| _________________ | 
| |     | | 
| | First Elem  | | 
| |_________________| | 
| _________________ | 
| |     | | 
| | Second Elem  | | 
| |_________________| | 
|      | 
|      | 
|      | 
|      | 
| _________________ | 
| |  Last  | | 
| | Vertical Bottom | | 
| |_________________| | 
|----------------------- 

첫 번째 요소와 두 번째는 그 내용 (텍스트 및 이미지)에 따라 가변 높이가있을 수 있습니다,하지만 난 수직 정렬 마지막 요소 하려고하면 마지막은 항상

고정됩니다 절대 위치를 사용하면 요소에 인라인 높이 CSS 속성을 설정하는 이퀄라이제이션 함수이 깨집니다. 각 innerelements 공유 가능한 전체 폭 보낸

-------MainElement------ 
| _________________ | 
| |     | | 
| | First Elem  | | 
| |_________________| | 
| _________________ | 
| | Second overlaps | | 
| |_________________| | 
| |  Last  | | 
| | Vertical Bottom | | 
| |_________________| | 
|----------------------- 

I은 ​​표시 테이블이 또한 중단 내측 요소 다음 테이블 셀을 사용하려고하는 경우, 그들은 동일한 행의 모든 ​​요소 것처럼. 때문에 오래된 브라우저에 대한 지원

-------MainElement------ 
| _____________   | 
| |First|2nd |   | 
| |Ele |Elem |   | 
| |  |  |   | 
| |  |  |_______ | 
| |  |  |Vert | | 
| |  |  |Bottom | | 
| |_____|______|_______| | 
|------------------------- 

, 사실은 위대하지만, = (

방법이이 수행하는 경우?

IE와 잘 동작하지 않는 디스플레이 플렉스을 사용할 수 없습니다

Answer 1

당신은 인 flexbox을 사용할 수 있습니다 : 이러한 설정으로 flexcontainer로 컨테이너를 정의합니다

.container { 
    display: flex; 
    flex-direction: column; 
    justify-items: space-between; 
} 

... 그리고추가에서 마지막 자식 요소