Question

我需要一种方法让div垂直重复一定数量（36）次，每个之间有1px的空间。 div是绝对定位的，因此每个单独的样式将是一吨CSS。

我不介意直接将36个div放入HTML中，虽然我不愿意这样做，但是每个div的样式效率都不高。

Answer 1

如何筑巢？

你可以用相对位置或可能的边距来嵌套它们：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;
}

Answer 2

正如其他人所说，你不能使用纯HTML或CSS来做到这一点。如果你想用PHP做，你可以这样做：

假设您的div有一个名为“mydiv”的类。这堂课应该有位置：绝对高度：10px宽度：10px边界半径：4px 就像你说的那样。除此之外，添加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，那么您应该检查您的网络服务器是否支持它。有关在HTML中使用PHP的更多信息，请参阅此内容：

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

这段代码可能并不完美，但我相信你能够使用它。

Answer 3

绝对定位无法做到这一点，因为正如您所说的绝对定位，您必须定义物品从文件流中取出时的坐标。

然而，您可以使用浮点数执行此操作。以下面的代码为例：

<!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显示在前一个下面的换行符上，而不会给它一个确切的定位值。然后给它一个余量来增加间距。

Answer 4

使用一个div执行此操作的唯一方法是创建当前div看起来像的图像，其中包含1px个空格。这样，您可以创建固定的宽度/高度div，其中图像的背景设置为重复。只用一个div就可以产生你想要的错觉。

否则，如前所述，您将需要x量divs来获得所需的重复次数。这可以使用jQuery或类似的东西轻松实现，但如果你真的只想要一个div，那么背景图像可能就是这样。

如何使用少量CSS定位大量绝对div？

4 个答案: