1

嘿，我有一些像这样的 CSS 代码：

/* ROW 1 (1-8) */
#rsvpBadge0{position: absolute; top: -2px; left: -1px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge1{position: absolute; top: -2px; left: 74px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge2{position: absolute; top: -2px; left: 149px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge3{position: absolute; top: -2px; left: 224px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge4{position: absolute; top: -2px; left: 299px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge5{position: absolute; top: -2px; left: 374px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge6{position: absolute; top: -2px; left: 449px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge7{position: absolute; top: -2px; left: 524px; z-index: 2; width: 50px; height: 50px;}
/* ROW 2 (9-16) */
#rsvpBadge8{position: absolute; top: 68px; left: -1px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge9{position: absolute; top: 68px; left: 74px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge10{position: absolute; top: 68px; left: 149px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge11{position: absolute; top: 68px; left: 224px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge12{position: absolute; top: 68px; left: 299px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge13{position: absolute; top: 68px; left: 374px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge14{position: absolute; top: 68px; left: 449px; z-index: 2; width: 50px; height: 50px;}
#rsvpBadge15{position: absolute; top: 68px; left: 524px; z-index: 2; width: 50px; height: 50px;}

等等等等……

现在我有从 1 到 207 的相同方式。它可以工作，但我看到的问题是它在 FireFox 中看起来很好（顶部和左侧坐标是正确的）但是当我在 IE 和 Chrome 中查看它时，它们是与最高值相差无几（需要再提高一点）

所以我对你们所有人的问题是：

1) 知道每个 rsvpBadge 具有不同的数字和最高值，我如何缩短代码？

2）更正IE和chrome的坐标，而不必为每个浏览器多做3个1-209层。

这是一个视觉

在此处输入图像描述

左边是 Chrome 中的样子，右边是 FireFox。

4

3 回答 3

4

浮动这些元素似乎很合适：

.rsvp-badge{z-index: 2; width: 50px; height: 50px;float:left;}

完成后，添加clear:left;到开始行的每个元素。

更好的是：将所有元素放在一个固定宽度的容器中，这样每行就可以容纳 8 个元素。

更新：

啊哈！所以这就是一个 rsvp 徽章应该是什么。

您可以使用伪元素摆脱几个规则：

<div class="user-photo has-rsvpd"></div>
<div class="user-photo"></div>

.user-photo {
    /*size,background etc. ommited*/
    position:relative;/*to allow position:absolude on pseudo-element*/
}
.has-rsvpd:after {
     /*size,background etc. ommited*/
     content:"";position:absolute;top:0;left:0;/*apply to top left corner*/
}

或者稍微重构一下 HTML（这取决于架构，在运行时可能是合适的）：

<div class="user-photo has-rsvpd"><span class="rsvp-badge"></span></div>
<div class="user-photo"><span class="rsvp-badge"></span></div>

.rsvp-badge {
     display:none;/*hide when user has not rsvpd*/
}
.has-rsvpd .rsvp-badge{
     /*same as :after in the sample above, but without a content property*/
}
于 2012-05-24T04:52:52.857 回答
1

如果您不想使用 javascript 或 floating，您可以更改 html 吗？然后将类添加到元素中，因为（而不是 id）类不必是唯一的，例如：

<div class="rsvpBadgeAll rsvpBadgeLeft0 rsvpBadgeTop0">...</div>
<div class="rsvpBadgeAll rsvpBadgeLeft1 rsvpBadgeTop0">...</div>
...
<div class="rsvpBadgeAll rsvpBadgeLeft7 rsvpBadgeTop0">...</div>
<div class="rsvpBadgeAll rsvpBadgeLeft0 rsvpBadgeTop1">...</div>
...
<div class="rsvpBadgeAll rsvpBadgeLeft7 rsvpBadgeTop1">...</div>
...

并且还使用类而不是 id 定义 css，例如：

.rsvpBadgeAll { position: absolute; z-index: 2; width: 50px; height: 50px; }

.rsvpBadgeLeft0 { left: -1px; }
.rsvpBadgeLeft1 { left: 74px; }
.rsvpBadgeLeft2 { left: 149px; }
.rsvpBadgeLeft3 { left: 224px; }
.rsvpBadgeLeft4 { left: 299px; }
.rsvpBadgeLeft5 { left: 374px; }
.rsvpBadgeLeft6 { left: 449px; }
.rsvpBadgeLeft7 { left: 524px; }

.rsvpBadgeTop0 { top: -2px; }
.rsvpBadgeTop1 { top: 68px; }
.rsvpBadgeTop2 { top: ...px; }
...
.rsvpBadgeTop25 { top: ...px; }
于 2012-05-24T05:07:45.173 回答
0

在 CSS 中你只能放

    #rsvpBadge{position: absolute; z-index: 2; width: 50px; height: 50px;}

    #rsvpBadge0{ top:<x>, left:<x>}
    #rsvpBadge1{ top:<x>, left:<x>}
    #rsvpBadge2{ top:<x>, left:<x>}

........等等并编写一个javascript来根据屏幕大小计算顶部和左侧。

于 2012-05-24T04:47:42.380 回答