css - 如何让表格单元格右对齐？

Question

我有一个包含两行的表格。
看起来像这样:

—————————————————
|   1   |   2   |
|———————————————|
|   3   |       |
—————————————————

第一行有两个单元格，但第二行只有一个。

如何让第二行中唯一的表格单元格对齐到第一行中第二个表格单元格的下方？ (不在第二行单元格前添加单元格)
像这样:

—————————————————
|   1   |   2   |
|———————————————|
|       |   3   |
—————————————————

这是我的 HTML:

<div class="table">
    <div class="row">
        <div class="cell one">
            1
        </div>
        <div class="cell two">
            2
        </div>
    </div>
    <div class="row">
        <div class="cell three">
            3
        </div>
    </div>
 </div>

还有我的 CSS:

div.table {
    display:table;
    background:#EEE;
    padding:10px;
}
 div.row {
    display:table-row;
    background:#610;
    padding:10px;
    width:100%;
    text-align:right;
}
 div.cell {
    display:table-cell;
    background:#016;
    padding:10px;
    color:white;
    font-family:sans-serif;
}

jsFiddle .

我试过边距和 float 。不过，我想尽可能避免绝对和 float 。

Answer 1

如果您不想要额外单元格的唯一原因是您无法控制 HTML，您可以这样做:

.row + .row:before {
    content: '';
    display:table-cell;
    background-color:white;
}

http://jsfiddle.net/7H7rf/6/