使用带有自动余量的calc

Question

我想通过使用css3 calc（）来使用margin-right来自动+某些像素，但似乎该语句是错误的。

selector{margin: calc(auto + 5px);

那么，如何使用它可以获取自动边距并加上固定像素边距？

---

这样的事情！

Answer 1

来自MDN：

  

calc（）CSS函数可以在<length>，<frequency>的任何地方使用，   需要<angle>，<time>，<number>或<integer>。用calc（），你   可以执行计算以确定CSS属性值。

您无法使用 auto，因为它不是calc()的有效值。

calc()

的语法

term
  : unary_operator?
    [ NUMBER S* | PERCENTAGE S* | LENGTH S* | EMS S* | EXS S* | ANGLE S* |
      TIME S* | FREQ S* ]
  | STRING S* | IDENT S* | URI S* | hexcolor | function | math
  ;

有关详细信息，请参阅Docs

---

正如您评论的那样，您希望将div置于中心位置，但您希望5px上的margin right比使用text-align: center;更能实现div }在父元素上，将子display: inline-block;元素设为div.wrap { text-align: center; } div.wrap div { display: inline-block; height: 100px; width: 100px; color: #fff; } div.wrap div.with_margin { margin-right: 5px; background: #f00; } div.wrap div.without_margin { background: #000; }

Demo

输出

{{1}}

Answer 2

看着我今天的问题，我为自己为什么不能正确思考感到ham愧？基本上，自动页边距就是剩下的边距减去div宽度的50％。在此基础上，我们可以像这样布置元素：

margin-left: calc(50% + 5px);
transform: translateX(-50%);

使用前面的代码等效于calc(auto + 5px);。由于calc不支持自动，因此我们需要使用实际的翻译概念。这意味着我们也可以使用50% - half of width的概念以绝对位置进行布局，但是为了简单起见，我在这里喜欢transform。

请参见下面的演示

.parent{
  position: relative;
}
.child{
  border: 2px solid green;
  width: 25%;
  height: 50px;
  margin: 10px auto;
}
.right{
  margin-left: calc(50% + 20px);
  transform: translateX(-50%);
}
.left{
  margin-left: calc(50% - 20px);
  transform: translateX(-50%);
}
#border{
  height: 100%;
  border: 1px solid yellow;
  width: 25%;
  margin: auto;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
}

<div class="parent">
  <div id="auto" class="child">
    auto margin
  </div>
  <div id="auto-right" class="child right">
    auto + pushed to right
  </div>
  <div class="child left">
    auto + pushed to left
  </div>
  <div id="border"></div>
</div>

增大或减小左右的正负值以正确理解它。

注意：使用以下代码

.right{
  margin-left: calc(50% + 20px);
  transform: translateX(-50%);
}

与使用相同：

.right{
  margin-right: calc(50% - 20px);
  transform: translateX(-50%);
}

这个概念。

还要注意，该问题与某个百分比计算加上所需的平移有关。因此，在此答案中，同时使用了calc和transform。如果您确实需要在中间移动，那么我们可以使用（不带左边距或右边距）：

transform: translateX(-20px)

答案的计算结果为50％，但问题是需要使用calc(20% - 20px)之类的百分比。