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

Question

我很难并排对齐三个 div。我设法让它在 Chrome 中运行，但是当我测试其他浏览器时，它就彻底崩溃了。

我需要第一个div占用100%的可用空间，第二个div有静态宽度(160px)，第三个div需要width: auto，这取决于里面的内容大小(但技术上我可以它也适用于静态宽度)。

这是我尝试过的:

.row {
  display: table;
}

.col {
  display: table-cell;
}

你可以在这里看到完整的代码:https://codepen.io/anon/pen/RLjGab

如您所见，这在 Chrome 中没有任何问题，但在其他浏览器中，只要我将任何内容放入列中，行的高度就会大于定义的高度，我很难发现为什么。

我也需要它在 IE9 中工作，所以 flexbox 是行不通的，但如果有人至少能为我指明如何实现这一目标的正确方向，那就太棒了。

提前致谢

Answer 1

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