将百分比宽度与边距(以像素为单位)组合在一起

你可以使用calc()减去20px从33.33%.

在这种情况下,您将使用width: calc(33.33% - 20px)替换边距.

更新的示例

#main .item:nth-child(3n+1),
#main .item:nth-child(3n+2) {
    width: calc(33.33% - 20px);
    margin-right: 20px;
}

不幸的是,这将导致宽度不同的元素(因为20px没有从所有元素中减去).更好的解决方案是13.33px从所有元素中减去(40px/ 3px):

更新的示例

#main .item {
    height: 100px;
    width: calc(33.33% - 13.33px);
    float:left;
    text-align: center;
}