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;
}

Answer 2

删除table-cell属性并使用float属性。像下面一样更新你的CSS。

.child{
background: red;
width: 20px;
float:left;
}

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

FIDDLE DEMO

Answer 3

伪元素怎么样？ demo

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

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

.parent {
    width:200px;
}

Answer 4

为此，您可以将这段代码用于.lastchild类：

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

这会将.lastchild项与.parent元素

的最右侧对齐

将最后一个单元格右对齐排列

4 个答案: