如何用纯CSS使.row-collapse的margin-left动态等于.w-sidebar宽度的负值？

这问题我熟！要让.row-collapse的margin-left动态等于.w-sidebar宽度的负值，**CSS自定义属性（也就是变量）**是最直接且优雅的方案，完全不需要写死固定像素值，还能轻松适配各种动态场景。

核心思路：用CSS变量同步宽度 #

我们可以把侧边栏的宽度定义成一个可复用的变量，然后在需要关联的地方直接引用这个变量并计算负值。这种方法不仅支持动态宽度（比如百分比、min-content、max-content，甚至结合min()/max()计算），还能通过媒体查询或JS轻松修改，关联的样式会自动同步更新。

基础实现代码 #

/* 在全局作用域定义变量（也可以放在父元素里缩小作用域） */
:root {
  --sidebar-width: min(250px, 30%); /* 动态宽度示例：取250px和30%中的较小值 */
}

.w-sidebar {
  width: var(--sidebar-width);
  /* 其他侧边栏样式 */
  background-color: #f5f5f5;
  height: 100vh;
}

.row-collapse {
  /* 直接用变量计算负值margin */
  margin-left: calc(-1 * var(--sidebar-width));
  /* 其他内容区样式 */
  padding: 1.5rem;
  background-color: #fff;
}

为什么这能解决你的问题？ #

• 你之前尝试在calc()里直接混合min()/max()出现不支持的情况，现在把min()/max()的计算放在变量里，calc()只负责处理变量的负值转换，浏览器完全支持这种写法。
• 变量的值可以是任意合法的CSS长度值，不管是固定像素、百分比，还是fit-content这类动态关键字，.row-collapse的margin-left都会自动同步。

结合媒体查询适配不同屏幕 #

如果需要在不同屏幕尺寸下调整侧边栏宽度，只需要修改变量的值就行，不用重复写margin-left的规则：

@media (max-width: 768px) {
  :root {
    --sidebar-width: 200px; /* 小屏幕下侧边栏变窄 */
  }
}

@media (max-width: 480px) {
  :root {
    --sidebar-width: 100%; /* 超小屏幕下侧边栏占满宽度 */
  }
}

替代方案：用Flexbox/Grid布局实现（无需手动设置margin） #

如果你是要实现侧边栏与内容区的折叠/偏移布局，也可以用Flexbox或Grid来间接实现，避免手动管理margin：

Flexbox示例 #

.container {
  display: flex;
}

.w-sidebar {
  width: var(--sidebar-width);
  /* 侧边栏样式 */
}

.row-collapse {
  flex: 1;
  /* 如需偏移，仍可用变量负值：transform: translateX(calc(-1 * var(--sidebar-width))) */
}

总结 #

最推荐用CSS自定义属性的方案，它完美匹配你“动态关联宽度”的需求，代码简洁易维护，还能灵活扩展到其他需要同步尺寸的场景。

内容的提问来源于stack exchange，提问作者Mojimi