javascript - 您如何使用 Javascript 将元素绝对定位到网格布局中？

Question

以下示例显示了平铺的 div，一旦单击淡出，我一直在尝试扩展它，以便删除子 img 而不是 div。

发生这种情况时，div 会丢失任何 CSS 定义的宽度和高度，并且网格会被破坏。

有谁知道如何使用不显示并保持网格布局的 JQuery UI 效果来为图像设置动画？

http://jsfiddle.net/bzCbh/4/ - 工作示例

谢谢

Answer 1

您的图块设置为display:inline忽略所述元素的高度和宽度。因此，当图像被删除时，它们很自然会崩溃，div 从一开始就从未尊重高度和宽度。将它们更改为display:inline-block，它会工作。

.layer .tile { ... display:inline-block; ...}

您还应该更改图像以display:block使它们的行为一致

.layer .tile img { display:block; }

​ 工作小提琴：http: //jsfiddle.net/bzCbh/7/