我如何用少量的CSS定位大量的绝对div？ [英] How can I position a large number of absolute divs with a small amount of CSS?

问题描述

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

我不介意直接将36个div放入HTML中，尽管我会不喜欢，但每个样式都是低效的。

解决方案

如何嵌套它们？

你可以用相对定位或者一些边距来嵌套它们： http://jsfiddle.net/zWbUu /

$ b 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; 
职位：亲属; 
 top：21px; 
 
 
 
 $ b $ p 
 $ b 
如果你需要一些内容int，你可以使用一个嵌套的绝对位置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; 
职位：亲属; 
 top：1px; 
颜色：#fff; 
 text-align：center; 
} 
  
 
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.
解决方案
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;
}​


                        
这篇关于我如何用少量的CSS定位大量的绝对div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！