网格中最右边的列不等于其他列

Question

我无法让最右边的三列与其他列具有相同的宽度。代码在这里： https://jsfiddle.net/tg4pts46/

除最后一列外，每列都有 60 像素的填充（间距），因为我不希望外部列有间距。这就是问题所在，但我不确定如何解决。这就是我的意思：

[class*='col-'] {
    padding-right: 60px;
}

[class*='col-']:last-of-type {
    padding-right: 0;
}

非常感谢任何帮助。谢谢！

Answer 1

这样的事情怎么样？

CSS:

[class*='col-'] {
  padding: 0 15px;
}
[class*='col-']:first-of-type {
  padding: 0 30px 0 0;
}
[class*='col-']:last-of-type {
  padding: 0 0 0 30px;
}

工作示例：https://jsfiddle.net/NateW/tg4pts46/8/

Answer 2

不确定您是否习惯使用 Table、tr 和 td，但这似乎解决了对称性问题。 td 结合 nth-child 伪 class.

td:nth-child(1){
    border-right:40px solid transparent;
}
td:nth-child(2){
    border-right:20px solid transparent;
    border-left:20px solid transparent;
}
td:nth-child(3){
    border-left:40px solid transparent;
}

http://jsfiddle.net/SaharshSinha/89jmrtym/2/

网格中最右边的列不等于其他列

Right-most column in grid not equal to the other columns

html

css

grid