CSS表未正确对齐图像

Question

我正在使用CSS表来创建响应式布局并水平对齐图像。当我调整屏幕大小时，所有图像都会水平调整大小。

但问题是，如果你看一下我的笔，右边的图像永远不会对齐： http://codepen.io/vincentccw/full/IlHfj/

很明显，你仍然可以在右上方的图像上看到一条非常细的红线，这使得它更糟糕的是如果我慢慢地调整它们，整个图像开始摇晃。

有解决方法吗？

Answer 1

您的图像没有排列，因为即使您已经给出了相同宽度的单元格，由于表格的呈现方式（以及您使用的小数位数），右侧单元格比左侧单元格略薄该图像略短（导致红线）

您可以向单元格添加vertical-align:top（以停止摆动），也可以通过删除中间列的宽度来确保左右单元格的宽度相同：{{3} }