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

我已经尝试过利润率＆amp;彩车。如果可能的话，我想避免绝对和漂浮。

Answer 1

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

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

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

Answer 2

为什么不添加一个空单元格？这没什么不对。见question

jsFiddle example

<强> 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"></div>
        <div class="cell three">
            3
        </div>
    </div>
</div>

然后使用以下CSS将空单元格的背景设为灰色：

div.cell:empty {
    background:#EEE;
}

Answer 3

我不知道你究竟想要实现什么，但试试这个

.three
{
position:relative!important;
left:100%!important;
display:inline-block!important;
}

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

你可以将类重命名为.right单元

如何让表格单元格向右对齐？

3 个答案: