2

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

有人知道如何让这个工作吗？

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

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

等距 DIV 的流体宽度

4

1 回答 1

0

如果您有 float:left 和 box-sizing:border-box ，则 33.3333% 效果很好，在这种情况下，排水沟和间距向内工作。但是因为你想要（除非我错了）左边的图像粘在左边（左边没有间距）和右边的图像粘在右边（右边没有间距），边框框不会在不添加额外样式的情况下成为最短的解决方案，因此使百分比更小是最快的解决方案 - 允许浏览器在排水沟之间分配超过 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%;
}
于 2013-05-27T09:51:39.153 回答