在没有flexbox的情况下并排对齐三个div

Question

我很难将三个div并排排列。我设法让它在Chrome中运行，但是一旦我测试了其他浏览器，它就变得很糟糕。

我需要第一个div占用100％的可用空间，第二个div有静态宽度（160px），第三个div需要宽度：auto，取决于里面的内容大小（但我可以在技术上制作它也适用于静态宽度）。

这就是我的尝试：

.row {
  display: table;
}

.col {
  display: table-cell;
}

您可以在此处查看完整代码：https://codepen.io/anon/pen/RLjGab

如您所见，这在Chrome中没有任何问题，但在其他浏览器中，只要我在col中放置任何内容，行的高度大于定义，并且我真的很难找出原因。

我也需要这个在IE9中工作，所以flexbox是不行的，但是如果有人能够至少指出我如何实现这一目标的话，这将是非常棒的。

提前致谢

Answer 1

我想通了，我只需要将vertical-align: middle;添加到他的列中，并修复它。