获得完美的3列布局

Question

我有一个有点困难的时间试图得到3列布局排序。这是我当前的HTML和css布局

<div class="row">
    <div class="col">C1</div>
    <div class="col">C2</div>
    <div class="col">C3</div>
</div>

CSS如下：

.row {
   width: 964px;
}

.row:last-child {
   margin: 0;
}

.row .col {
  width: 33.33%
  float: left;
  margin-bottom: 20px;
  margin-right: 10px;
}

使用33.33%的百分比，这些列基本上具有相同的宽度。我的问题是，虽然列显示在行容器中，但在最后一列上，右边距有一个间隙。增加右边距会将最后一列推到下一行。

我如何对齐列，使它们保持相同的宽度，但第一列和最后一列没有任何页边距(即：第一列没有左边距，第三列没有右边距)....有什么想法吗？

谢谢。。

Answer 1

.row .col:last-child
{
    margin-right:0;
}

这个就行了。但是，别忘了在'.row.col' style后面加上它

Answer 2

在此处使用%而不是px margin-right: 10px;

.col{
    width: 32%;
    margin-right: 2%;
}

.col:last-child{
    margin-right: 0%;
}

Answer 3

你应该使用

.row{
display:table;
}
.col{
display:table-cell;
}

示例

.row{
   display:table;
   width:100%;

}
.col{
    border:1px solid #000;
    display:table-cell;
    width:33%;

}