html - 列のように HTML テキストを垂直方向に揃える方法

Question

次のような HTML が必要です。

we already know that: 2*1 = 2
                      2*2 = 4 
                      2*3 = 6

(つまり、数字は列のように整列されます)

テーブルを使用することも、テキストインデントを使用することもできます。

他のオプションと、もしあれば「正しい方法」とは何かを知りたいです。

Answer 1

よりセマンティックなテーブル以外のソリューションに対する私の 2 セント:

<div class="content">we already know that:</div>
<div class="math">
    <div class="eq">
        <span class="operand">2</span><span class="operator">*</span><span class="operand">1</span><span class="operator">=</span><span class="result">2</span>
    </div>
    <div class="eq">
        <span class="operand">2</span><span class="operator">*</span><span class="operand">2</span><span class="operator">=</span><span class="result">4</span>
    </div>
    <div class="eq">
        <span class="operand">2</span><span class="operator">*</span><span class="operand">3</span><span class="operator">=</span><span class="result">2</span>
    </div>
    <div class="eq">
        <span class="operand">2</span><span class="operator">*</span><span class="operand">300</span><span class="operator">=</span><span class="result">600</span>
    </div>
</div>

.content {float:left;}

.math {float:left;}
.math .operand {width: 3em;display: inline-block; }
.math .operator {padding-left: 5px; padding-right:5px }
.math .result {font-weight:bold; text-align:right;width:3em;display: inline-block; }

ただし、余分なマークアップを見て、あなたが持っているものを確認することは、table実際には最善の解決策だと思います. 5 つの列、2 つのオペランド列、2 つの演算子列、および 1 つの結果列を含むデータのテーブルがあります。

http://jsfiddle.net/vnMM2/

テーブルバージョンの更新(迅速かつダーティな変換)

<div class="content">we already know that:</div>
<table class="math">
    <tr class="eq">
        <td class="operand">2</td>
        <td class="operator">*</td>
        <td class="operand">1</td>
        <td class="operator">=</td>
        <td class="result">2</td>
    </tr>
    <tr class="eq">
        <td class="operand">2</td>
        <td class="operator">*</td>
        <td class="operand">2</td>
        <td class="operator">=</td>
        <td class="result">4</td>
    </tr>
    <tr class="eq">
        <td class="operand">2</td>
        <td class="operator">*</td>
        <td class="operand">3</td>
        <td class="operator">=</td>
        <td class="result">2</td>
    </tr>
    <tr class="eq">
        <td class="operand">2</td>
        <td class="operator">*</td>
        <td class="operand">300</td>
        <td class="operator">=</td>
        <td class="result">600</td>
    </tr>
</table>

.content {float:left;}
.math {float:left;}
.math td { text-align:right}

.math .result {font-weight:bold }

http://jsfiddle.net/vnMM2/2/