Question

嘿,所有我有一些 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和铬的坐标,而无需为每个浏览器再加3个1-209层。

< 坚固> 这是可视 < / 坚固 >

""https://i.sstatic.net/J5BB8.jpg" alt="此处输入图像描述"/"

左边是铬和右边的FireFox。

Answer 1

浮动这些要素似乎适当:

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

完成后,在开始于一行的每个元素中加入 clear:left;。

更好:把所有元素放在一个固定宽度的容器里,使每行各适合8个元素。

Update:

啊哈!所以他们应该是一个什么 rsvp -badge应该是什么。

http://jsfidle.net/ovfidle/7WF3Q/"rel="nofollow" 使用伪元素 :

<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*/
}

或者""http://jsfiddle.net/ovfiddle/7WF3Q/1/" rel=“nofollow”>调整 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*/
}

Answer 2

如果您不想使用 javascript 或浮动 , 您能否更改 html? 然后在元素中添加类, 因为( 而不是 ids) 类不必是独一无二的, 例如 :

<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>
...

并用类而不是ids来定义 cs, 例如 :

.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; }

Answer 3

在 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>}

........and so on And write a javascript for calculating the top and left as per screen size.

Update:

友情链接