Nasıl html ve css kullanarak sanal bir kalıp (zar oynamak için) oluşturabilirim?

Question

CSS/HTML ve JavaScript kullanarak sanal bir kalıp (zar oynamak için) yapmaya çalışıyorum ... JavaScript bölümüm çalışıyor, ancak HTML/CSS'nin istediğim şekilde görüntülenmesini sağlayamıyorum (kenarlıksız bir tablo oluşturmadan ve her noktayı bir hücreye yerleştirmeden). Aşağıdaki JSfiddle yaptım: http://jsfiddle.net/ShoeMaker/KwBaN/5/ ve 4, 5 veya 6 aldığınızda, benim sorunumu görebilirsiniz ..

Doğru sayıda nokta köşeli parantez [] ile bir analog kalıp almak istiyorum içeride. 1. Orta orta 2'de bir nokta olmalıdır. 2. sol üstte ve sağ altta bir noktaya sahip olmalıdır. 3. solda, ortada ortada bir nokta olmalıdır ve sağ alt taraftaki bir 4. sol üst, sağ üst, alt sol ve sağ altta bir tane olmalıdır. 5. üst solda, sağ üstte, ortada orta, alt-sol ve sağ alt 6. üst üste üç ve alttan üç (ya da soldan üç, sağdan üçe doğru) üç olmalıdır.

Kenarlıksız bir tablo oluşturmayı düşündüm, ancak önce blok/satır içi ve süper/alt ile yapmayı denemek istiyorum. Görüntüleri görüntülemek istemiyorum (izin verilmiyor). Sadece son sonucu görüntülemeli, titreme yapmamalı ve haddeleme yapmamış gibi davranmalıdırlar (bu durum gelecekte daha iyi olabilir). ASCII karakterlerini veya benzerini kullanarak "dijital" yapmak umurumda değil. (Analog zar gibi çok geleneksel).

Fikirlerim benim niyetim gibi çalışmıyor mu? küçük ek notlar

çift ...

• I "standart" bir zar (7 olan, 9, 12, 20, ??? taraf) içinde bu kullanmak isteyebilir gelecek, kolayca uyarlanabilir olması gerekir (":" kullanmayan).

• nispeten küçük olmak ister misiniz (kalıbın başına ekranın 1/8 kadar sürmez (Yahtzee yarım ekranından daha fazla alacaktı)!)

Answer 1

şeylerin bir çift.

Span öğeleri zaten satır içi öğelerdir, bu nedenle css'inizde belirtmeniz gerekmez.

"Satır" öğelerinizin artık "satır içi blok" görüntü stili olan bir ana kapsayıcıya sarılı olduğunu unutmayın. İç elemanlar, istediğiniz efekti elde etmek için birbirlerinin üstünde "istiflenmiş" olmasını istediğiniz gibi block eleman olarak değiştirildi.

<span class="bracket">[</span> 
<div id="die"> 
    <div id="TopRow">&nbsp;&nbsp;&nbsp;</div> 
    <div id="MidRow">&nbsp;&nbsp;&nbsp;</div> 
    <div id="BotRow">&nbsp;&nbsp;&nbsp;</div> 
</div> 
<span class="bracket">]</span> 

#die { 
    display: inline-block; 
    padding: 5px;    
} 

span.bracket { 
    font-size: 95px;  
} 

#TopRow, #MidRow, #BotRow { 
    font-weight: bold;   
} 

Güncelleme keman: http://jsfiddle.net/KwBaN/11/

DÜZENLEME: burada "ölmek" yapmak için başka bir güncelleme Yorumunuza gereğince biraz daha küçük:

div { 
    padding: 0; 
    margin: 0; 
} 

#die { 
    display: inline-block;    
} 

span.bracket { 
    font-size: 40px;  
} 

#TopRow, #MidRow, #BotRow { 
    font-weight: bold; 
    font-size: 12px; 
    line-height: 8px;  
} 

başka güncellenmiş keman : http://jsfiddle.net/KwBaN/34/

Answer 2

HTML:

<span>[</span> 
<div style="display:inline-block;"> 
    <div id='top'></div> 
    <div id='mid'></div> 
    <div id='bot'></div> 
</div> 
<span>]</span> 

Sadece yazı tipi boyutlarını nesnelere ekleyin ve kimliğin doğru olmasına dikkat edin. Noktalar birbirinin üzerinde üç satırda görüntülenir. Belki güzel yapmak için line-height ile karıştırın.

Answer 3

Böyle bir kavram?

http://jsfiddle.net/NuRKL/12/

Answer 4

Bazı html ve css yaptı ve sonuç burada -

http://jsfiddle.net/ashwyn/KwBaN/21/

Düzenleme: inline css ile
Güncelleme keman.