排列三個div並排沒有柔性盒

Question

我很難排列三個div並排排列。我設法讓它在Chrome中運行，但是一旦我測試了其他瀏覽器，它就會一團糟。

我需要第一個div佔用100％的可用空間，第二個div有靜態寬度（160px），第三個div需要寬度：auto，這取決於內部的內容大小（但我可以在技術上使其以靜態寬度工作）。

這是我曾嘗試：

.row { 
    display: table; 
} 

.col { 
    display: table-cell; 
} 

你可以看到整個代碼在這裏：https://codepen.io/anon/pen/RLjGab

正如你看到的，這個工程沒有在Chrome反對票的問題，但在其他瀏覽器，只要我把任何內容都放在列的高度上，這個行的高度比定義的大，我很難找出原因。

我需要這個在IE9中工作，所以flexbox是不行的，但如果有人能夠至少指出我如何實現這個目標的正確方向，那將是非常棒的。

在此先感謝

Answer 1

我想通了，我只是需要加入vertical-align: middle;給他列，並固定它。