嘿,我猜这可能相当微不足道,但我很难找到答案或弄清楚它。
我正在尝试创建一个带有任意间距的彩色方 block 网格。 这本身很容易做到,特别是因为我只需要九个正方形。但是虽然 我看着我完成的代码,我不禁觉得有一种更简单、更有效的方法可以实现这一点。
目前,我在我的 css 中声明了九个不同的 ID,每个方 block 一个。
div.container{
position:relative;
left:50px;
top:50px;
background-color:rgb(45,45,45);
height:300px;
width:300px;
}
#square{
position:absolute;
background-color:rgb(52,82,222);
left:20px;
top:20px;
height:80px
width:80px
#square2{
position:absolute;
background-color:rgb(58,82,22);
left:110px;
top:20px;
height:80px;
width:80px;
etc etc etc
我想做的是找到一种更有效的方法来做到这一点。
感谢您的帮助!
最佳答案
您可以为共享属性的方 block 使用一个类:
.square {
position: absolute;
width: 80px;
height: 80px;
}
您绝对定位它们是否有特定原因?听起来像是更适合花车的工作。
div.container {
width: 240px;
}
.square {
float: left;
width: 80px;
height: 80px;
}
关于CSS ID 变体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6157704/