Question

我编码设计时遇到了障碍，自昨天下午以来我无法过去。我有一个带有经典无序列表的菜单，我试图将它设计成瓷砖＆＃34;画廊＆＃34;。我正在使用12列网格，方形图块流体。

当正方形浮动时，这就是它的样子：http://jsfiddle.net/Lzvna/1/

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

问题实际上是第一个方块，因为它没有调整大小同步＆＃34;同步＆＃34;当元素浮动时，右边有4个方块。当你检查它时，你会发现第一个正方形比它应该大1倍。 Opera和Safari似乎最糟糕。 Chrome，FF和IE也会打破它，但Chrome似乎是最仁慈的。

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

我还尝试使用display: inline-block显示正方形内嵌，而不是浮动。在这里，调整大小的问题消失了（正方形调整大小＆＃34;同步＆＃34;），但反过来我在第一个正方形的同一行上右边的4个正方形流动有问题：http://jsfiddle.net/UaCPN/

有人在浮动时知道如何修复此调整大小问题吗？

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

- 编辑 -

其他信息

对于较小的屏幕，我打算减少列数，并将它们放在li:first-child下，这将解决此调整大小问题，因为我还没有发现问题。彼此相邻的宽度和高度相同，即：google＆＃34; Fluid Squares V2＆＃34; （抱歉，无法发布更多链接）。
列表项的数量不固定。我希望能够在标记中向堆栈顶部添加更多内容，并让样式处理其余部分。

Answer 1

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

#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，因为它是相对于宽度计算的：

E.g：

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

下行：非常手动。好处：非常精确的外观。

小提琴：http://jsfiddle.net/UaCPN/1/

Answer 2

是的！知识：D

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

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

浮动框与任何其他框之间的边距不会崩溃（甚至在浮动及其流入子项之间也不会崩溃）。

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

每次我认为我有正常的文件流，漂浮和清理，这样的事情就会出现......如果我的理解是错误的，请纠正我。

调整不同尺寸的浮动流体方块的问题

2 个答案: