テキストの付いた縦型ボックスのHTML CSS

Question

テキスト、HTML、CSSだけでこれを行うことは可能ですか？ イメージは私の古いWindowsプログラムからのスクリーンショットで、私はWebおよびモバイルプラットフォーム用に再構築しています。この記事で

、いくつかの人々は私が横のボックスの一連の操作を行い助け： CSS alignment of div tags that form boxes around letters

ここでの目標です。私はHTMLを生成するWordPressショートコードを作成しています。一部のページが1つか2つを持っているかもしれません（他は3〜5を持っているかもしれません

[showvowel vowel=KAMATZ letter=ALEF] 
[showvowel vowel=PATACH letter=ALEF] 
[showvowel vowel=SEGOL letter=ALEF] 

し、後で私は完全に異なる文字で同じことを行う可能性があります

：私はワードプレスでこのような何かをしたいと思います。

[showvowel vowel=KAMATZ letter=GIMMEL] 
[showvowel vowel=PATACH letter=GIMMEL] 

私はすでにJSON構造内のテキストを構築するための情報を持っている。

アイデアは、動的に私が好きな文字と母音作成するためにHTMLを建設する再使用可能なサブルーチンを作成することですいつでも表示することができます私はWordPressのショートコードに入れても問題ありません。

サンプルのアイデアがある場合は、ヘブライ文字を表示する必要はありません。私はそれをマスターしました。

HTML5 flexboxは本当にクールに見えますが、まだプライムタイムの準備ができていません。 http://www.html5rocks.com/en/tutorials/flexbox/quick/

もし私がする必要があれば、私はそれを横向きにして水平にすることができると思います。

Answer 1

テーブルを使用したくない場合は、CSSボックスでdivボックスを使用します。シンプルで、大部分のWebブラウザで動作します。

参照：http://linuxandfriends.com/2009/04/04/how-to-style-div-elements-as-tables/

HTML：

<div class="div-table"> 
<div class="div-table-caption">Top Portion</div> 
<div class="div-table-row"> 
<div class="div-table-col">Next Down</div> 
</div> 
<div class="div-table-row"> 
<div class="div-table-col">Next Down</div> 
</div> 
</div> 

CSS：

.div-table{display:table; border:1px solid #003399;} 

.div-table-caption{display:table-caption; background:#009999;} 

.div-table-row{display:table-row;} 

.div-table-col{display:table-cell; padding: 5px; border: 1px solid #003399;} 

EDIT：

注：3つの列を持つようにラッパーを使用する必要があります。