使用css为元素添加宽度

Question

我有一堆类，下面是3个类的例子：

.col-1-3{
    width:calc(100%/(3/1));
}
.col-2-3{
    width:calc(100%/(3/2));
}
.col-1{
    width:100%;
}

(所有这些都是内联块和相对位置，如果该信息可能有用的话……)

现在，如果一个元素应用了这些类中的任何一个，也应用了另一个类，让我们称它为“蝙蝠侠”，我需要元素的宽度增加30px。

不涉及我的每个.col-*类并在其中添加30px，有没有！增加元素宽度的其他方法？参见示例伪代码：

.batman{
    add-to-width:30px;
}

我的想法可能是:之前和/或之后。添加一个伪元素并以某种方式将其向左/向右移动15px，主元素将跟随/增长...但它不起作用……

要求:严格的css，没有javascript请。

有什么想法吗？

提前感谢！！:)

Answer 1

我相信你有两个选择-第一个是类似于边际的选择，因为边际将会堆叠，另一个是使用calc()

.batman {
    margin: 0 15px;
}

或

.batman {
    width: calc(100% + 30px);
}