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）ブラウザごとにさらに3つの1-209レイヤーを作成することなく、IEとchromeの座標を修正します。

これがビジュアルです

ここに画像の説明を入力してください

左側はChromeでの外観で、右側はFireFoxです。

4

3 に答える 3

4

これらの要素をフローティングすることは適切と思われます。

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

その後clear:left;、行を開始するすべての要素に追加します。

さらに良い方法：すべての要素を固定幅のコンテナに配置して、すべての行がそれぞれ8つの要素に収まるようにします。

アップデート：

A-ha！これがrsvp-badgeの想定です。

疑似要素を使用して、いくつかのルールを回避できます。

<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 に答える