1

我在浮动环境中有一系列二次 div。它们的宽度设置为父元素的 19.5%，边距为 0.25%。通过将二次图像缩放到浮动 div 宽度的 100% 来确保它们的 1:1 纵横比：

div.item {
    display: block;
    position: relative;
    float: left;
    width: 19.5%;
    margin: .25%;
}

div.item img {
    display: block;
    left: 0;
    bottom: 0;
    width: 100%;
}

现在我得到的是每行有五个浮动 div，跨越父 div 的整个宽度。

我想做的是增加第一个浮动的大小以覆盖与其他浮动的 2x2 相同的区域，将其宽度设置为 2*19.5% + 2*.25% = 39.5%。

完成后，在 Linux 上的两个浏览器中进行测试，铬和火狐。我得到不同的结果。

Chromium 按预期呈现案例，一个大图像在其右侧有两行，每行三个 div，然后是每行有五个 div 的行。

然而，Firefox 显示三行，其中大的右侧只有三个 div，然后才具有五行。大的下面的两个项目实际上丢失了，就好像它的高度有点太大了（虽然不明显）。将大的大小设置为 39.49% 是可行的，但虽然在大多数情况下可能看不到差异，但这是一个非常肮脏的 hack。

在这里查看测试站点：http ://www.schattensaiten.net/sm62/live

任何想法可能是Firefox行为的原因以及如何解决这个问题？

编辑：我终于找到了一个看起来正确的 Firefox 窗口大小，所以它可能与按百分比缩放图像时的舍入误差有关。到目前为止，我还没有发现它在 Chrome 中不起作用的情况，所以 Chrome 似乎对此更加宽容。尽管如此，我仍然对一个不会强迫我放弃我的网站动态调整以使用完整浏览器大小的方法的工作解决方案非常感兴趣。我讨厌固定宽度的布局。我想在任何给定的屏幕上尽可能大地展示我的图像。

4

2 回答 2

1

尝试将元素放置在带有边距的框内。

.item{width: 20%;}
.inside{margin: 5px;}

就像我在这里的小提琴

于 2013-08-23T12:23:36.227 回答
0

我刚刚找到了一个可行的解决方案，保持简单的浮动布局。将“clear: both”或“clear: left”添加到第三行的第一项可确保将整个行向下移动到大图像下方。

在某些情况下，如果仔细观察，仍然可以看到大图像下方的边距比其他三张图像下方的边距小一个像素，但如果您不知道，您可能不会注意到。

于 2013-08-23T12:48:22.573 回答