1

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

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

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

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

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

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

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

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

- 编辑 -

附加信息

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

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

4

2 回答 2

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

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

小提琴：http: //jsfiddle.net/Lzvna/4/

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

例如：

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

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

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

于 2013-05-11T10:44:21.320 回答
0

是的！明白了：D

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

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

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

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

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

于 2013-05-12T07:17:44.480 回答