2

我有一个网页，其中有一组平铺元素作为背景。位于此之上，我有另一组瓷砖（两倍大）充当叠加层。这些较大的图块中的每一个都具有等于较小背景图块之一的大小的“右边距”。你可以看到一个例子@ http://jsfiddle.net/dhx2r/2/ *updated

乍一看，这显示正确。问题在于，由于每个较大的瓷砖都有这个右边距，这意味着如果你扩大窗口，除非它大于 3 个小瓷砖宽，否则瓷砖不会向上滑动以填充间隙。（像这样：http: //img444.imageshack.us/img444/1412/70953496.png）

理想情况下，我会以某种方式附加到 window.resize 事件并在 3 个小图块的间隙可用时将“margin-right”设置为“0”。我尝试使用 jsfiddle 的 js 面板中的代码来执行此操作，但它没有给出正确的结果。由于我使用的代码依赖于“window.resize”事件，jsfiddle 没有演示实际发生的情况，但它至少显示了我正在使用的代码。

我今天一直在为这个问题苦苦挣扎约 7 个小时，所以我的脑子有点炸了！解决这个初始问题后，我的意图是以某种方式错开奇数行，使它们具有小瓷砖宽度的“左边距”，以产生这种效果：http: //img507.imageshack.us/img507/3600 /57663338.png

我设法使用（假设小瓷砖是 150 像素和大 300 像素）计算偶数/奇数行：

if ((pos != 0) && (pos % 600 != 0)) {
    // The row is even, stagger the tiles.
}
else {
    // The row is odd, do nothing.
}

..但是我从来没有解决这个最初的问题来处理逻辑。

无论如何，如果有人对我如何使这项工作有解决方案，我将不胜感激！我觉得我浪费了一整天的时间把头撞在墙上。

谢谢 ：-）

4

2 回答 2

2

我有一个解决方案的开始，但有时颜色设置不正确。我正在寻找解决它。

小提琴 1

最后所有的问题都在这里解决了。

谢谢你，找到解决方案对我来说很有趣。我希望这个解决方案对你有好处。

于 2012-08-14T17:40:13.320 回答
1

Maybe you should ditch the margin and use some hidden filler tiles that collapse just like the large ones?

fiddle

Okay, part 2. This is a solution needs tweaking, and I've colored even rows orange for testing. I don't have time to fiddle with the exact numbers, but this should get you very close.

fiddle 2

于 2012-08-09T15:59:02.950 回答