Question

对于一个项目，我需要尽可能高效制作一个大约20x20px的小方格div的世界地图。

但是因为我需要使用浏览器缩放div大小我目前正在使用宽度为1％且高度为2％的div，这在16:10的屏幕上看起来大致为方形。

我有一个名为“世界”的div，里面装满了许多小div，如：

<div id="world1" onclick="">&nbsp;</div>

这些div中的每一个都与css配对如下：

#world1 {
    background: url(/images/1.png) 0 0 no-repeat;
    float: left;
    width: 1%;
    height: 2%;
    position: absolute;
    top: 79%;
    left: 91%;
    z-index: -1;
    margin-top: -10px;
    margin-left: -10px;
}

#world1:hover {
    background-position: 0 -20px;
    cursor: pointer;
}

我认为制作地图的最简单方法是生成div和相应css的代码，以便名称为“world1”到“world20000”的div放置在

的位置。

top:1%;
left: 1%;

到

top:100%;
left: 100%;

然后我会手工完成并删除地图上覆盖海洋的div以创建世界地图。

如何生成所有这些代码，或者更好的方法是使用更简单的方法，因为我的解决方案当然不优雅或高效。

还有没有人有更优雅的解决方案来保持所有浏览器尺寸的div正方形，只是用浏览器窗口缩放方块？

Answer 1

Perl中的几行将为您完成肮脏的工作。

我认为制作地图最简单的方法就是生成代码对于div和相应的css，以便名称为“world1”的div 通过“world20000”被放置在......的位置。

如果您不将其放在absolute位置，但使用float:left，添加尽可能多的要填充整行的方块，然后使用clear:left来更轻松跳到另一排。在Perl中不超过20行。

关于复制/生成很多div css

1 个答案: