Question

我有一个流动的浮动框镶嵌图，使用宽度和高度的百分比。

它在Webkit浏览器和Firefox中运行良好，只需看看这个jsfiddle： http://jsfiddle.net/Mtk57/

问题在于具有不同宽度块的行，2个30％的块和2个20％的块。

高度代码（20％宽度块）

.mosaic li::after {
    display:block;
    padding-top:100%;
    content: '';
}

高度代码（30％宽度块）

.mosaic li::after {
    padding-top:66.6666666666666666666667%;
}

在Internet Explorer中，高度的小数略有不同，似乎足以防止块在下一行的开头掉落。 Internet Explorer似乎没有围绕像素值，为什么？

我想我可以说清楚：两者;使用：nth-child，但我想知道是否有更好的解决方案。

Answer 1

使用花车并不容易，我无法想出一个令人满意的解决方案。但是我确实找到了一个类似的内联块的解决方案，最终看起来完全一样。要点：

a）在float: left;

中更改display: inline-block;至.mosaic li {}

b）确保<li>元素之间没有空格（否则会出现水平间隙）。

c）将line-height: 0;添加到.mosaic {}（否则会出现垂直间隙）。