Question

我有两个定义侧边栏的类：

.w-sidebar {
    width: 250px;
    min-width: 250px;
    max-width: 250px;
}

.row.collapse {
    margin-left: -250px;
    left: 0;
}

第二个边距左边必须等于第一个边距的负值才能工作。

但后来我想让宽度动态而不是固定的像素数量：

.w-sidebar {
    width: 35vw;
    min-width: 250px;
    max-width: 100vw;
}

.row.collapse {
    margin-left: -250px;
    left: 0;
}

如何仅使用css创建.row-collapse动态范围的左边距并等于.w-sidebar的宽度？

我尝试在min中混合使用max / calc，但不支持。

还尝试使用媒体查询，但说实话，只是发现了它并且无法弄明白。

我的分叉/尝试：https://www.codeply.com/go/eUGo31Lwho

工作原创演示：https://www.codeply.com/go/clX6THorTK

Answer 1

CSS变量怎么样：

:root {
  --v: 250px;
}

.box {
  width: var(--v);
  display: inline-block;
  background: red;
  height: 100px;
}

.left {
  margin-left: calc(-1 * var(--v));
  width: 20px;
  display: inline-block;
  background: blue;
  height: 50px;
}

<div class="box"></div><div class="left"></div>

CSS将div的边距设置为等于div的另一个宽度

1 个答案: