How can I position a large number of absolute divs with a small amount of CSS?

问题

I need a way to make a div repeat a certain number (36) of times vertically, with 1px of space between each one. The divs are absolutely positioned, so styling each one individually would be a ton of CSS.

I don't mind putting 36 divs into the HTML directly, although I'd prefer not to, but styling each one would be inefficient.

回答1:

How about nest them?

you can nest them with relative positioning or maybe some margin: 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;
}

If you need some content int them, you can use a nested absolute positioned div or this trick: 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;
}

回答2:

As others have said, you cannot do this using pure HTML or CSS. If you wanted to do it with PHP, you could do something like this:

Say that your div has a class called "mydiv." This class should have Position:absolute Height:10px Width:10px Border-radius:4px just like you said. In addition to those, add a 1px top margin.

Your CSS should now look kinda like this:

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

To make your div repeat, put some code like the following inside your HTML where you want it to go.

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

Like I said, this uses PHP. If you've never used PHP before, then you should check if your webserver supports it. See this for a bit more info on using PHP inside HTML:

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

This code probably isn't perfect but I'm sure you'll be able to work with it.

回答3:

This is not possible with absolute positioning, because as you stated with absolute positioning you must define the coordinates of the objective as it is taken out of the document flow.

You can do this with floats however. Take the following code for example:

<!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>

By making the holder div less than the width of two box divs you force the next box div to appear on a newline below the previous one without giving it an exact positioning value. Then just give it a margin to add the spacing.

回答4:

The only way you can do this with one div would be to create an image of what the current div looks like, with 1px of whitespace. This way, you can create a fixed width/height div that has the background of the image set to repeat. This will give the illusion you want with only one div.

Otherwise, as already stated, you will need x amount of divs to get the repetition you need. This can be easily achieved using jQuery or something similar but if you really only want one div, then the background-image may be the way to go.

来源：https://stackoverflow.com/questions/9761069/how-can-i-position-a-large-number-of-absolute-divs-with-a-small-amount-of-css

标签

css

html

css-position

repeat