html - 获得完美的 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' 样式

之后包含它