Question

我无法将最右边的三列与其他列相等。代码在这里： https://jsfiddle.net/tg4pts46/

除了最后一列之外，每列有60px的填充（一个装订线），因为我不希望外侧列上有水槽。这就是它的问题，但我不确定如何修复它。这就是我的意思：

[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伪类。

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/

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

2 个答案: