CSS 计算函数不居中

Question

我需要使用 calc 函数计算宽度，但它不会除以周围的距离。

HTML

<div class="container-card">
    <div class="container-holder"></div>
</div>

SCSS

.container-card {
    background-color: grey;
    height: 500px;
    .container-holder {
        background-color: gold;
        width: calc(100% - 14px);
        height: 300px;
    }
}

这是一个例子：

https://jsfiddle.net/fze3L0w8/

换句话说：我需要在每个宽度上从左到右有 14px 的距离。

Answer 1

只需设置 14px 的边距，您将不再需要设置 width 属性:

.container-card {
    background-color: grey;
    height: 500px;
    .container-holder {
      background-color: gold;
      margin: 14px;
      height: 300px;
    }
}

这是更新后的 fiddle。

Answer 2

这是解决方案：

background-color: gold;
width: calc(100% - 28px);
height: 300px;
margin: auto;

你还需要左边或右边的边距

Answer 3

你要么设置它 100% - 28px 以减少宽度 14px right 和 left 并设置 margin: auto; 使 div

居中

.container-card {
    background-color: grey;
    height: 500px;
    .container-holder {
      background-color: gold;
      width: calc(100% - 28px);
      margin: auto;
      height: 300px;
    }
  }

或仅设置 margin:0px 14px; 且无需设置宽度，它将占用父级宽度 - 边距

  .container-card {
        background-color: grey;
        height: 500px;
        .container-holder {
          background-color: gold;
          margin: 0px 14px;
          height: 300px;
        }
      }

Answer 4

您可以使用 margin:auto; 从两侧添加 space。你需要设置它 100% - 28px

.container-card {
    background-color: grey;
    height: 500px;
   
  }
   .container-holder {
      background-color: gold;
      width: calc(100% - 28px);
      height: 300px;
      margin: auto;
    }

<div class="container-card">
    <div class="container-holder">

    </div>
  </div>

Answer 5

更优雅的解决方案是-

.container-card {
    background-color: grey;
    height: 500px;
    .container-holder {
      background-color: gold;
      width: calc(100% - 28px);
      height: 300px;
      margin: 0 auto;
    }
  }

Calc 函数将获得 28px 并将一个元素置于另一个元素的中心。使用 margin: 0 auto;

Answer 6

只需将容器居中，而不是使用 flex 之类的这种硬编码的脆弱方法，然后您就可以使用任何您想要的边距而不会破坏它。

.container-card {
  display: flex;
  justify-content: center;
  background-color: grey;
  height: 500px;
}
.container-holder {
  background-color: gold;
  margin: 0 14px;
  width: 100%;
  height: 300px;
}

 <div class="container-card">
    <div class="container-holder">

    </div>
  </div>

Answer 7

更优雅的解决方案可能是这个 `

.container-card {
    background-color: grey;
    height: 500px;
    .container-holder {
      background-color: gold;
      margin-left: 14px;
      margin-right:14px;
      height: 300px;
    }
  }

`

CSS 计算函数不居中

CSS calc function does not center

html

css

scss-mixins