Question

我在浮动环境中有一系列二次div。它们的宽度设置为父元素的19.5％，边距为.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上测试两个浏览器chrome和firefox。我得到了不同的结果。

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

然而，在拥有五项行之前，Firefox会显示三行，只有三个div位于大一行的右侧。有效地丢失了大项下面的两个项目，就像它的高度有点太大（虽然不明显）。将大的大小设置为39.49％有效，但在大多数情况下可能看不出差异，这是一个相当肮脏的黑客。

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

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

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

Answer 1

尝试在边框内放置一个元素。

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

Like my fiddle here

Answer 2

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

在某些情况下，看起来非常接近，仍然可以看到大图像下方的边距是小于其他三个图像的像素，但如果你不知道，你可能不会注意到。

使用％-sized浮点数的特定于浏览器的行为。原因和解决方案？

2 个答案: