О репликации / генерации большого количества Div CSS - PullRequest
Новая
       21

О репликации / генерации большого количества Div CSS

0 голосов
/ 21 июля 2011

Для проекта мне нужно максимально эффективно сделать карту мира из маленьких квадратных делений размером примерно 20x20 пикселей.

Однако, потому что мне нужны размеры div для масштабирования с помощью браузераВ настоящее время я использую div с шириной 1% и высотой 2%, что на экране 16:10 выглядит примерно квадратным.

У меня есть div, называемый "world", заполненный множеством маленьких 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, чтобы div с именами от «world1» до «world20000» располагались в позициях в диапазоне от 

top:1%;
left: 1%;

на 

top:100%;
left: 100%;

, а затем я бы вручную прошел и удалил на моей карте элементы div, покрывающие океаны, для создания карты мира.

Как мне сгенерировать весь этот код,или, что еще лучше, есть более простой способ сделать это, потому что мое решение определенно не элегантно и не эффективно.

Также у кого-нибудь есть более элегантное решение для сохранения квадрата div для всех размеров браузера и простомасштабирование квадратов в окне браузера?

1 Ответ

1 голос
/ 21 июля 2011

Несколько строк в Perl сделают грязную работу за вас.

Я подумал, что самый простой способ сделать карту - это сгенерировать код для div и соответствующего css, так что div с именами "world1" до "world20000" размещаются в позициях от ...

Было бы проще, если бы вы не поместили его в позиции absolute, а использовали float:left, добавили столько квадратов, сколько хотите, чтобы заполнить всю строку, а затем используйте clear:left, чтобы перейти к другой строке. Не более 20 строк в Perl.

...