HTMLとCSSシンプルなクロスワード

Question

私は自分のウェブサイトをデザインしようとしています。私は簡単なクロスワードパズルを使って私についていくつか説明したかったのです。同様に、すべての行は異なる単語ですが、別の単語を綴る「中」の列があります。基本的に私がやりたいことをイメージしたものです：

言葉は私によってあらかじめ定義されています。
HTMLとCSSだけを使ってこれを行う最も簡単な方法を知りたいと思います。私はテーブルを使用することを考えましたが、単語に応じて各行を移動させるために、各行は異なる表でなければなりません。
私はイメージを使用していないし、サイト上に置いて、私は毎回それを望むので、ユーザーが各単語を置く、それは右/左の意味/説明を示しています。
とにかく助けがあれば、私はブートストラップを使用することができます。

アイデア？

Answer 1

我々はレイアウトにテーブルを使用しないとき以来？余白を付けた5つのdivを追加して、nth-childをスタイルします。あなたが好きなら、その方法でアニメーションを追加することもできます。

Answer 2

私は最善の方法は、最初の正方形を表しコンテナを定義するだろうと言うだろう：

.square { 
    position: absolute; 
    height: 32px; 
    width: 32px; 
} 

あなたはその後、したがって、これらのそれぞれを配置することができます

<div id="square-0" class="square" style="top: 32px; left: 32px;"> 
    A 
<div> 
<div id="square-1" class="square" style="top: 32px; left: 64px;"> 
    B 
</div> 
<div id="square-2" class="square" style="top: 64px; left: 64px;"> 
    C 
</div> 

限り、あなたのようにあなたのdivのそれぞれの高さと幅の正確な倍数である上下の値を使用してそれらを配置します。

ただのアイデアだが、それは私がおそらくそれを行う方法です。それらにsquare-0やsquare-1のようなIDを渡してください。将来的にプログラム上で展開することを決めるのが簡単です。

Answer 3

実際にはテーブルが最善の策だと思っています。空の四角形ごとに余分に<td>タグを追加するだけです。 CSSにtd {width: 40px}を追加することで、それぞれの四角形を同じ幅にすることができます。

table { 
 
    text-align: center; 
 
} 
 

 
td { 
 
    width: 40px; 
 
    height: 40px; 
 
} 
 

 
.letterData { 
 
    border: 2px solid #000; 
 
}

<table> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td class="letterData">O</td> 
 
    <td class="letterData">N</td> 
 
    <td class="letterData">E</td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    
 
    <tr> 
 
    <td></td> 
 
    <td class="letterData">T</td> 
 
    <td class="letterData">W</td> 
 
    <td class="letterData">O</td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    
 
    
 
    <tr> 
 
    <td class="letterData">F</td> 
 
    <td class="letterData">O</td> 
 
    <td class="letterData">U</td> 
 
    <td class="letterData">R</td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td class="letterData">T</td> 
 
    <td class="letterData">H</td> 
 
    <td class="letterData">R</td> 
 
    <td class="letterData">E</td> 
 
    <td class="letterData">E</td> 
 
    </tr> 
 
    
 
    <tr> 
 
    <td class="letterData">E</td> 
 
    <td class="letterData">I</td> 
 
    <td class="letterData">G</td> 
 
    <td class="letterData">H</td> 
 
    <td class="letterData">T</td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
</table>