6

CSS/HTML と JavaScript を使用して仮想サイコロ (サイコロをプレイするため) を作成しようとしています... 私の JavaScript 部分は機能していますが、HTML/CSS で希望どおりに表示することができないようです (作成せずに)縁なしの表を作成し、各ドットをセルに配置します)。私は次の JSfiddle を作成しました: http://jsfiddle.net/ShoeMaker/KwBaN/5/そして、4、5、または 6 を取得すると、私の問題を見ることができます..

正しいドット数の角括弧 [ ] のセットを持つアナログ ダイスを取得したいと考えています。1. 中央から中央に 1 つのドットを配置する必要があります 2. 左上に 1 つのドットを配置し、右下に 1 つのドットを配置する必要があります 3. 左上に 1 つのドット、中央から中央に 1 つのドットを配置する必要があります。右下に 4. 左上、右上、左下、右下に 1 つある必要があります 5. 左上、右上、中央-中央、左下に 1 つある必要があります、および右下 6. は、上部に 3 つ、下部に 3 つ (または、左側に 3 つ、右側に 3 つ) 配置する必要があります。

フチなしの表を作ろうと思ったのですが、まずはブロック/インライン、スーパー/サブでやってみたいと思います。画像を表示したくありません (許可されていません)。最終結果を表示するだけでよく、ちらつきや転がっているふりをする必要はありません (ただし、将来的にはクールになるかもしれません)。ASCII文字などを使用して「デジタル」にすることは気にしません。（アナログサイコロのように、あまりにも伝統的です）。

私のフィドルが意図したとおりに機能しないというアイデアはありますか?

いくつかのマイナーな追加メモ...

  • 将来、これを「非標準」のサイコロ (7、9、12、20、??? 面を持つもの) で使用したいと思うかもしれませんが、簡単に適応できる必要があります (「:」の使用は機能しません)。

  • 比較的小さくしたい (サイコロごとに画面の 1/8 を占めるべきではありません (Yahtzee は画面の半分以上を占めます!))

4

4 に答える 4

3

いくつかのこと。

Span 要素は既にインライン要素であるため、CSS 内で指定する必要はありません。

「行」要素は、表示スタイルが「インライン ブロック」の親コンテナ内にラップされていることに注意してください。内側の要素はblock、目的の効果を達成するために互いに「積み重ねる」必要があるため、要素に変更されました。

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

フィドルの更新: http://jsfiddle.net/KwBaN/11/

編集：あなたのコメントによると、「ダイ」を少し小さくするための別の更新があります：

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

別の更新されたフィドル: http://jsfiddle.net/KwBaN/34/ </p>

于 2012-06-13T05:22:36.887 に答える
2

私はいくつかのhtmlとcssを実行しましたが、結果はここにあります-

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

編集:
インライン css でフィドルを更新しました。
http://jsfiddle.net/ashwyn/KwBaN/36/

于 2012-06-13T05:22:38.577 に答える
1

HTML:

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

フォントサイズを追加してIDを正しくするだけで機能するはずです。ドットを 3 行に並べて表示します。多分line-heightそれをきれいにするためにいじります。

于 2012-06-13T05:16:37.553 に答える
0

こんなコンセプト？

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

于 2012-06-13T05:21:50.130 に答える