javascript - Hvordan kan jeg lave en virtuel terning (til at spille med terninger) ved hjælp af html og css?

Jeg forsøger at lave en virtuel terning (til at spille med) ved hjælp af CSS/HTML og JavaScript... Min JavaScript-delen virker, men jeg kan ikke få HTML/CSS til at vise det, som jeg vil (uden at lave en tabel uden kant og placere hver prik i en celle). Jeg lavede følgende JSfiddle: http://jsfiddle.net/ShoeMaker/KwBaN/5/ og når man får en 4, 5 eller 6, kan man se mit problem..

Jeg vil gerne have en analog terning med et sæt firkantede parenteser [ ] med det korrekte antal prikker indeni. 1. skal have en prik i midten-midten 2. skal have en prik i øverste venstre og en i nederste højre 3. skal have en prik i øverste venstre, en i midten-midten og en i nederste højre 4. skal have en i øverste venstre, øverste højre, nederste venstre og nederste højre 5. skal have en i øverste venstre, øverste højre, midten-midten, nederste venstre og nederste højre 6. skal have tre hen over toppen og tre hen over bunden (eller tre ned ad venstre side og tre ned ad højre side).

Jeg har overvejet at lave en tabel uden kanter, men jeg vil gerne prøve først at gøre det med blok/inline og super/sub. Jeg vil IKKE vise billeder (ikke tilladt). De skal kun vise slutresultatet, ikke blinke og lade som om de ruller (selvom det måske kunne være sejt i fremtiden). Jeg er ikke interesseret i at gøre dem 'digitale' ved at bruge ASCII-tegn eller lignende. (For traditionelt, som analoge terninger).

Nogle idéer til, hvorfor min fiddle ikke fungerer, som jeg har tænkt?

Et par mindre yderligere bemærkninger...

• Jeg vil måske bruge dette med "ikke-standard" terninger (dem med 7, 9, 12, 20, ??? sider) i fremtiden, det skal være nemt at tilpasse (Brug af ":" virker ikke).

• Vil gerne, at det er relativt småt (Bør ikke fylde 1/8 af skærmen per terning (Yahtzee ville fylde mere end halvdelen af skærmen!))

Svar #1

Et par ting.

Span-elementer er allerede inline-elementer, så du behøver ikke at angive det i dit CSS.

Bemærk, at dine "row" elementer nu er indpakket i en overordnet container med en display-stil på "inline-block". De indre elementer blev ændret til at være block elementer, da du ønsker, at de skal være "stablet" oven på hinanden for at opnå den ønskede effekt.

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

Opdateret fiddle: http://jsfiddle.net/KwBaN/11/

REDIGER: Ifølge din kommentar er her en anden opdatering for at gøre "terningen" en smule mindre:

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

en anden opdateret fiddle: http://jsfiddle.net/KwBaN/34/

Svar #2

Jeg lavede noget HTML og CSS, og resultatet er her -

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

Rediger:
Opdateret fiddle med inline css.
http://jsfiddle.net/ashwyn/KwBaN/36/