Question

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

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

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

我在下面的帖子中尝试了这个例子，但是即使复制代码和CSS也可以正确地间隔图像，但不要使用流畅的网格调整大小。

Answer 1

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%;
}

表格图像调整大小＆amp;流体网格中的对齐

1 个答案: