如何解决CSS ID变体
|| 嘿,我猜这可能是微不足道的,但是尽管如此,我还是很难找到答案或弄清答案。 我正在尝试创建一个彩色正方形的网格,它们之间具有任意间距。 这本身很容易做到,特别是因为我只需要9个正方形。但是虽然 我看了看完整的代码,我不禁感到有一种更简单有效的方法来完成此任务。 目前,我在CSS中声明了9个不同的ID,每个ID对应一个ID。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,22);
left:110px;
top:20px;
height:80px;
width:80px;
etc etc etc
我想做的是找到一种更有效的方法。
谢谢您的帮助!
解决方法
假设内部正方形是
div
,那么您的容器中没有其他ѭ1each,并且每个内部div
应该是相同的width
和height
,这就是我要做的:
.container {
position: relative;
left: 50px;
top: 50px;
background: rgb(45,45,45);
height: 300px;
width: 300px;
}
.container > div {
position: absolute;
background-color: rgb(52,82,222);
height: 80px;
width: 80px;
}
#square1 {
left: 20px;
top: 20px;
}
#square2 {
left: 110px;
top: 20px;
}
..
如果每个div
需要单独的top
和left
属性,则别无选择,只能使用id
。
您可以避免使用.container > div
来添加class
,因为它选择了.container
的直接子元素中的所有div
元素。
HTML看起来像这样:
<div class=\"container\">
<div id=\"square1\"></div>
<div id=\"square2\"></div>
..
</div>
, 您可以将类用于共享属性的正方形:
.square {
position: absolute;
width: 80px;
height: 80px;
}
您是否有绝对的理由要定位它们?听起来像是更适合浮法的工作。
div.container {
width: 240px;
}
.square {
float: left;
width: 80px;
height: 80px;
}
, 为什么不给所有正方形相同的类并应用类似
.square
{
display: inline-block;
width: 80px;
height: 80px;
zoom: 1;
*display: inline /* for IE */
}
那应该使所有块都很好地包装,而不必为每个个体添加样式。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。