使用不同大小的浮动流体方块调整大小问题

Question

从昨天下午开始，我在编写设计代码时碰壁了。我有一个带有经典无序列表的菜单，我正在尝试将其设置为瓷砖“画廊”。我正在处理 12 列网格，方形瓷砖是流动的。

这是方块浮动时的样子：http://jsfiddle.net/Lzvna/1/

如您所见，li:first-child 正方形占据了右侧 4 个常规大小的 li 正方形的空间。当您调整窗口大小时，由于它们的百分比 width 和 padding 值，正方形会按预期弯曲，但是当您达到某些分辨率时，此列表中的最后一个正方形将在右侧的 4 个正方形下方碰撞。

问题实际上出在第一个方格上，因为当元素浮动时，它不会与右侧的 4 个方格“同步”调整大小。当你检查它时，你会发现第一个正方形比它应该的大约 1px。在 Opera 和 Safari 上似乎是最糟糕的。 Chrome、FF 和 IE 也会破坏它，但 Chrome 似乎是最仁慈的。

我尝试将第一个正方形的宽度和内边距减小到 3px，但它仍然会在 Opera 中中断，并且布局会开始变得丑陋。

我还尝试使用display: inline-block 显示正方形内联，而不是浮动。在这里，调整大小的问题消失了（方块调整大小“同步”），但反过来我遇到了将右侧的 4 个方块与第一个方块在同一行上流动的问题：http://jsfiddle.net/UaCPN/

有人知道如何解决浮动时调整大小的问题吗？

如果没有，有没有办法让 4 个方块在显示 inline-block 时以相同的方式流动？

-- 编辑--

附加信息

• 对于较小的屏幕，我计划减少列数并将它们排列在 li:first-child 下，这将解决这个调整大小的问题，因为当彼此相邻的元素具有相同的宽度和高度，即：google "Fluid Squares V2"（抱歉，还不能发布更多链接）。

• 列表项的数量不固定。我希望能够在标记的堆栈顶部添加更多内容，并让样式处理其余部分。

Answer 1

是的！明白了：D

所以最后，我所要做的就是清除堆栈中的第 6 个<li>：http://jsfiddle.net/Lzvna/5/

我认为清除元素（使其恢复正常流动）可以在第一个元素向下推时牺牲它的上边距。与浮动时不同，因为根据规范，当元素浮动时，它的边距永远不会塌陷。

浮动框和任何其他框之间的边距不会折叠（甚至在浮动框与其流入的子级之间也不折叠）。

来源：http://www.w3.org/TR/CSS2/box.html#collapsing-margins

每当我认为我有正常的文档流、浮动和清理时，就会出现类似的情况......如果我的理解有误，请纠正我。

Answer 2

我相信发生这种情况是因为无法渲染像素的一部分，因此您不需要如此高的百分比精度。出于同样的原因，屏幕越小，你的比例就越有可能不平衡。 所以为了让它看起来更平滑，为较小的屏幕制作不同的比例。

#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/