html - 如何垂直对齐列中的 HTML 文本

Question

我想要这样的 HTML:

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

(即，数字按列对齐)

我可以使用表格，或者文本缩进。

我想知道其他选择，如果有的话，什么是“正确的方法”。

Answer 1

My Two cents for a more semantic, non-table solution:

<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 列的数据表、两个操作数列、两个运算符列和一个结果列。

http://jsfiddle.net/vnMM2/

UPdate Table Version(快速而肮脏的转换)

<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/