表格图像在流体网格中调整大小和对齐答案

【问题标题】：Table image resizing & alignment in fluid grid表格图像在流体网格中调整大小和对齐
【发布时间】：2013-05-20 23:45:03
【问题描述】：

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

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

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

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

Fluid width with equally spaced DIVs

【问题讨论】：

你是否设置了图片的宽度属性？
如果我在此代码中将 .box1、.box2 等保持在默认的 150 像素，则图像太小并且无法流畅地调整大小，但会在页面上均匀分布。如果我将其更改为 33.3%，则图像的尺寸和页面尺寸都很好，但间距都被破坏了。我尝试了将图像大小添加到 html 并更改 .box 宽度的组合，但我找不到似乎可行的组合...
所以基本上我要问的是是否有人知道如何显示响应式和等距图像？ :)
当我将 .box 的宽度设置为 32% 时，我必须在某处有一些填充代码或其他东西，现在它们可以缩放并正确间隔！奇怪！
嗯。我说得太早了。 div 间隔相等，图像缩放正确，但排列不正确。虽然框中的文本与 div 的中间对齐，但图像位于左侧...

标签： html css alignment dreamweaver css-tables

【解决方案1】：

33.3333% 如果你有 float:left 和 box-sizing: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%;
}

【讨论】：