html - 流体网格中的表格图像大小调整和对齐

Question

我有一个包含 3 张图片的表格的流动网格布局。如果我将文本放在表格中，它会正确调整大小。但是，当我将图像放入表格单元格时，Firefox 中的单元格中的图像的流体网格会中断。不过它在 Chrome 中运行良好。

有人知道如何让它工作吗？

或者，我将图像放在一个 div 中，它们会适当调整大小，但我不确定如何使页面上的 3 个图像水平间距相等，它们总是略微偏左。

我已经尝试了下面线程中的示例，但即使在图像间距正确时复制代码和 CSS，但不要使用流体网格调整大小。

Fluid width with equally spaced DIVs

Answer 1

33.3333% 如果你有 float:left 和 box-sizing: border-box 效果很好，在这种情况下，间距和间距向内工作。但是因为你想要(除非我错了)左边的图像贴在左边(左边没有间距)和右边的图像贴在右边(右边没有间距)，border-box 不会是不添加额外样式的最短解决方案，因此减小百分比是最快的解决方案 - 允许浏览器在间距之间分配超过 1% 的空间。

转到解决方案，我假设您的图像大小相同并填满整个 .box。检查http://jsfiddle.net/jennift/YkvPn/2/ .

如果这不是你要找的，请纠正我。
CSS:

#container {
    width:100%;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    background:#000; /*for illustration purposes*/
}
#container [class*="box"] {
    width: 30%; /*change this value to see the changes on fluid layout */
    vertical-align: top;
    display: inline-block;
    background:#f00; /*for illustration purposes*/
}
.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}
#container div > img {
    width:100%;
}