自从昨天下午以来，我在编码设计时碰壁了。我有一个带有经典无序列表的菜单，并且我试图将其样式化为图块“图库”。我正在使用12列网格，并且正方形瓷砖是流动的。
这是正方形浮动时的样子：http://jsfiddle.net/Lzvna/1/
如您所见，li:first-child正方形在右侧占据4个常规尺寸的li正方形的空间。调整窗口大小时，由于它们的百分比width和padding值，正方形会按预期弯曲，但是当您达到某些分辨率时，此列表中的最后一个正方形将在右侧的4个正方形下方碰撞。
问题实际上出在第一个正方形上，因为浮动元素时它不会与右侧的四个正方形“同步”调整大小。当您检查它时，您会看到第一个正方形比应有的要大〜1px。对于Opera和Safari来说，情况似乎最糟。 Chrome，FF和IE也会破坏它，但Chrome似乎是最仁慈的。
我尝试将第一个正方形的宽度和填充减小到3px，但在Opera中仍然会中断，并且布局开始变得难看。
除了浮动之外，我还尝试使用display: inline-block内联显示正方形。在这里，调整大小的问题消失了（正方形调整大小为“同步”），但是依次使右侧的4个正方形与第一个正方形在同一行上出现问题：http://jsfiddle.net/UaCPN/
有人知道浮动时如何解决此大小调整问题吗？
如果不是，在显示行内块时，是否有办法使4个正方形以相同的方式流动？
-编辑-
附加信息
对于较小的屏幕，我计划减少列数并在li:first-child下流动它们，这将解决此大小调整问题，因为当相邻元素的宽度和高度相同时，我没有发现任何问题，即：谷歌“ Fluid Squares V2”（抱歉，无法发布更多链接）。
列表项的数量不是固定的。我希望能够在标记的堆栈顶部添加更多内容，并让样式负责其余部分。
最佳答案
我相信发生这种情况是因为不可能渲染像素的一部分，因此您不需要如此高的百分比精度。由于相同的原因，屏幕越小，您的比例不会达到收支平衡的机会就越大。
因此，要使其看起来更平滑，请为较小的场景设置不同的比例。
#portfolio-links li:first-child {
padding: 0 0 47.9% 0;
width: 47.9%;
}
@media screen and (max-width: 500px){
#portfolio-links li:first-child {
padding: 0 0 47.6% 0;
width: 47.6%;
}
}
@media screen and (max-width: 250px){
#portfolio-links li:first-child {
padding: 0 0 47.1% 0;
width: 47.1%;
}
}
缺点是高度不会完全相同。
小提琴：http://jsfiddle.net/Lzvna/4/
编辑：
选项2：
另一个解决方案是，如果元素的数量是固定的，并且您不介意为每个元素设置定位，则可以绝对定位元素并利用margin-top相对于宽度的计算：
例如：
#portfolio-links li:nth-child(4) {
margin-top: 27%;
left:50%;
}
缺点：非常手动。优势：非常精确的外观。
小提琴：http://jsfiddle.net/UaCPN/1/
关于resize - 大小不同的 float 流体正方形的大小调整问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16495885/