Как я могу расположить большое количество абсолютных элементов с небольшим количеством CSS? - PullRequest
Новая
       11

Как я могу расположить большое количество абсолютных элементов с небольшим количеством CSS?

3 голосов
/ 18 марта 2012

Мне нужен способ, чтобы div повторил определенное число (36) раз по вертикали с интервалом в 1 пиксель между каждым.DIVS абсолютно позиционированы, поэтому стилизация каждого из них по отдельности была бы тонной CSS.

Я не возражаю, если в HTML напрямую добавим 36 div, хотя я бы предпочел этого не делать, но стилизация каждого из нихбыть неэффективным.

Ответы [ 4 ]

1 голос
/ 18 марта 2012

Как насчет их вложения?

Вы можете вкладывать их с относительным позиционированием или, возможно, с некоторым запасом: http://jsfiddle.net/zWbUu/

HTML 

div id="container">
    <div class="square">
        <div class="square">
            <div class="square">
                <div class="square">
                    <div class="square">
                        <div class="square"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS: 

#container {
    position: absolute;
    top: -21px;
    left: 20px;
}
.square {
    background-color: #666;
    width: 20px;
    height: 20px;
    position: relative;
    top: 21px;
}​

Если вам нужен какой-то контент внутри них, вы можете использовать вложенный абсолютный позиционный div или этот трюк: http://jsfiddle.net/zWbUu/1/

HTML: 

<div id="container">1 (doesn't apear)
    <div class="square">2
        <div class="square">3
            <div class="square">4
                <div class="square">5
                    <div class="square">6
                        <div class="square">7</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS: 

#container {
    position: absolute;
    top: -20px;
    left: 20px;
}
.square {
    background-color: #666;
    width: 20px;
    height: 20px;
    line-height: 20px;
    position: relative;
    top: 1px;
    color: #fff;
    text-align: center;
}​
0 голосов
/ 18 марта 2012

Единственный способ сделать это с одним div - создать изображение того, как выглядит текущий div, с пробелом 1px.Таким образом, вы можете создать фиксированную ширину / высоту div, для которой задан повтор изображения фона изображения.Это даст желаемую иллюзию только с одним div.

В противном случае, как уже говорилось, вам понадобится х divs, чтобы получить необходимое повторение.Это может быть легко достигнуто с помощью jQuery или чего-то подобного, но если вам действительно нужен только один div, тогда можно использовать фоновое изображение.

0 голосов
/ 18 марта 2012

Это невозможно с абсолютным позиционированием, потому что, как вы указали с абсолютным позиционированием, вы должны определить координаты цели, как она извлекается из потока документов.

Однако вы можете сделать это с помощью поплавков.Возьмите следующий код, например: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
    body{
        background-color:#000;
        padding: 0;
        margin: 0;
    }
    #holder{
        width:15px;
        margin: 30px auto;
        padding: 1px 1px 0 1px;
            clear: both;
    }

    .box{
        width:10px;
        height:10px;
        margin-bottom: 1px;
        background-color: #3F6;
        float:left;
    }

</style>
</head>
<body>
    <div id="holder">
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
    </div>
</body>
</html>

Делая holder div меньше ширины двух box div, вы заставляете следующий div div появляться на новой строке ниже предыдущего без предоставленияэто точное значение позиционирования.Затем просто добавьте интервал.

0 голосов
/ 18 марта 2012

Как уже говорили другие, вы не можете сделать это, используя чистый HTML или CSS.Если вы хотите сделать это с помощью PHP, вы можете сделать что-то вроде этого:

Скажите, что у вашего div есть класс под названием mydiv.Этот класс должен иметь Положение: абсолютное Высота: 10 пикселей Ширина: 10 пикселей Радиус границы: 4 пикселя, как вы и сказали.В дополнение к этому, добавьте верхнее поле в 1px.

Ваш CSS теперь должен выглядеть примерно так: 

.mydiv {
    position:absolute;
    height:10px;
    width:10px;
    border-radius:4px;
    margin-top:1px;
}

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

<?php
for ($i = 1; $i <= 36; $i++) {
    echo "<div class='mydiv'>your div</div>";
}
?>

Как я уже сказал, это использует PHP.Если вы никогда раньше не использовали PHP, то вам следует проверить, поддерживает ли ваш веб-сервер его.Посмотрите здесь немного больше информации об использовании PHP внутри HTML:

http://www.ntchosting.com/php/php-in-html.html

Этот код, вероятно, не идеален, но я уверен, что вы сможете работать с ним.

...