css - 将最后一个单元格设置为右对齐

Question

我正在将我的 div 显示设置为这样的表格单元格。

HTML

<div id="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="lastchild">4</div>
</div>

CSS

.child{
    background: red;
    width: 20px;
    display: table-cell;
}

.lastchild {
    background: blue;
    width: 20px;
    display: table-cell;
    margin-right: 0;            
}

.parent {
    width:200px;
}

http://jsfiddle.net/Lx1p3y93/

我想知道是否有任何方法可以将最右边的单元格设置为右对齐？

Answer 1

将 CSS 更改为:

.lastchild {
   background: blue;
   width: 20px;
   display: table-cell;
   margin-right: 0;   
   float:right;
}

.child {
    background: none repeat scroll 0 0 red;
    display: table-cell;
    float: left;
    width: 20px;
}