resize - 调整大小不同的 float 流体方 block 的问题

Question

我在编码我的设计时遇到了障碍，从昨天下午开始我就无法通过。我有一个带有经典无序列表的菜单，我正在尝试将其样式设置为一个“画廊”。我正在处理一个 12 列的网格，方 block 是流动的。

这是方 block float 时的样子:http://jsfiddle.net/Lzvna/1/

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

问题实际上出在第一个方 block 上，因为当元素 float 时，它不会与右侧的 4 个方 block “同步”调整大小。当你检查它时，你会看到第一个方 block 比它应该的大 ~1px。它在 Opera 和 Safari 上似乎最差。 Chrome、FF 和 IE 也会破坏它，但 Chrome 似乎是最仁慈的。

我尝试将第一个方 block 的宽度和填充减少到 3px，但它在 Opera 中仍然会中断，布局会开始变得难看。

除了 float ，我还尝试使用 display: inline-block 显示方 block inline。在这里，调整大小的问题消失了(方 block “同步”调整大小)，但我又遇到了一个问题，即在与第一个方 block 位于同一行的右侧流动 4 个方 block :http://jsfiddle.net/UaCPN/

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

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

-- 编辑--

附加信息

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

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

Answer 1

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

#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%;
    }
}

缺点是它的高度不会完全相同。

fiddle :http://jsfiddle.net/Lzvna/4/

编辑:
选项 2:
另一种解决方案是，如果元素的数量是固定的，并且您不介意为每个元素设置定位，您可以绝对定位元素并利用 margin-top，因为它是相对于宽度计算的:

例如:

#portfolio-links li:nth-child(4) {
  margin-top: 27%;
  left:50%;
}

缺点:非常手动。优点:非常精确的外观。

fiddle :http://jsfiddle.net/UaCPN/1/