플렉스 박스없이 3 개의 div를 나란히 정렬

Question

3 개의 div를 나란히 정렬하는 데 어려움을 겪고 있습니다. 나는 그것을 크롬에서 작동하도록 만들었지 만 다른 브라우저를 테스트하자마자 지옥으로 갔다.

첫 번째 div는 사용 가능한 공간의 100 %를 차지해야하며 두 번째 div는 정적 너비 (160px)를 가지며 세 번째 div는 내용의 크기에 따라 너비가 필요합니다 (그러나 기술적으로는 정적 너비로도 작업하게하십시오).

.row { 
    display: table; 
} 

.col { 
    display: table-cell; 
} 

당신은 여기에 전체 코드를 볼 수 있습니다 : https://codepen.io/anon/pen/RLjGab

보시다시피,이 크롬 안된다 문제없이 작동하지만, 다른 브라우저를 가능한 한 빨리

이

내가 시도 것입니다 행의 높이가 정의 된 것보다 큰 열 안의 내용을 넣었습니다. 그리고 그 이유를 찾는 데 어려움을 겪고 있습니다.

IE9에서도 작동하려면 flexbox가 필요하지 않습니다.하지만 누군가가 적어도이 작업을 수행 할 수있는 올바른 방향으로 나를 안내 할 수 있다면 정말 좋을 것입니다. 사전

Answer 1

에서

덕분에 나는 단지 그가 열에 vertical-align: middle;을 추가하는 데 필요한, 그리고 그것을 고정, 그것을 알아 냈다.