Question

在屏幕上，我现在的左边距和右边距相等。但我需要的是，右边距应为“ x”，左边距应为“ x / 1.5”。而根据窗口大小，右边距自动设置。

Answer 1

您可以使用calc（）函数来完成此操作。

.myDiv {
    margin-right: 1em;
    margin-left: calc(1em / 1.5);
}

如果需要有关该功能的更多信息，请选中此选项。 https://developer.mozilla.org/en-US/docs/Web/CSS/calc

很有趣

Answer 2

您需要为数字定义正确的宽度，可以使用js / jquery找到宽度，然后使用以下方法：

只需更新代码，请立即检查

Margin Issue

希望这会有所帮助。

Answer 3

您可以使用css自定义属性和媒体查询来做到这一点：

.container {
  display: flex;
}
.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background: lime;
}
.box-with-margin {
  --margin-value: 2rem;
  margin-left: var(--margin-value);
  margin-right: calc(3 * var(--margin-value));
}

@media (max-width: 1600px) {
  .box-with-margin {
    --margin-value: 1rem;
  }
}

@media (max-width: 700px) {
  .box-with-margin {
    --margin-value: 0.5rem;
  }
}

<div class="container">
  <div class="box"></div>
  <div class="box box-with-margin"></div>
  <div class="box"></div>
</div>

Answer 4

我怀疑您正在尝试使元素居中，然后通过具有auto配置但没有相等值来使其稍微偏离中心。

这里是一个可以依靠flexbox实现此行为的想法：

.wrapper {
  margin:20px;
}

.box {
  width:80px;
  height:50px;
  background:blue;
  margin:auto;
}
.flex {
  display:flex;
}
.flex:before,
.flex:after{
  content:"";
}
.flex:after {
  flex-grow:1.5; /*will grow more than the before by 1.5 */ 
}
.flex:before {
  flex-grow:1;
}

<div class="wrapper">
  <div class="box"></div>
</div>

<div class="wrapper flex">
  <div class="box"></div>
</div>

如何给左边距与右边距比例？

4 个答案: