使CSS属性依赖于另一个[重复]

Posted 2023-03-05

【中文标题】使CSS属性依赖于另一个[重复]

【英文标题】：Make a CSS property depend to another [duplicate]

【发布时间】：2015-09-15 15:00:28

【问题描述】：

我想让我的一个 CSS 属性与另一个成比例，但没有一个是另一个的父级。它看起来像这样：

elem-to-look 
    /**
     * This value could not be explicit,
     * And I want it to working even with default values.
     */
    width: 50px;


elem-derivative 
    /* I'm looking for something like this */
    left: [elem-to-look: width] + 25px;

这甚至可能吗？如果没有，你会建议我什么样的解决方案？

【问题讨论】：

查看 SASS 或 LESS 他们允许变量和其他一些东西来帮助构建你的 CSS。

但即使是那些不是实时的，这意味着它们编译然后值保持静态..我认为实时版本太重了

使用纯 CSS 你可以使用calc，但前提是你知道元素的宽度，这可以是相对的：elem-to-look width: 50%; 和 elem-derivative left: calc(50% + 25px)。

非常需要像 jquery for css 的 css lib。 （很多常识功能）

只有FF支持css变量

【参考方案1】：

嗯，这很难，但在某些情况下你可以做到。

如果你的 body font-size 是稳定的并且你没有在你的元素的 parent 中更改它，你可以执行以下操作：

body 
    font-size: 20px;


elem-to-look 
    width: 2.5em;


elem-derivative 
    left: calc(2.5em + 25px);

如果这让你满意，那可以工作。

【讨论】：

这也是我在评论中提出的建议。他必须以某种方式手动或通过脚本生成 elem-to-look 的宽度，并且知道这个值就是您所需要的一切。

嗯，这不是真的。你建议使用 50% 的父元素，我建议使用更灵活的字体大小，因为你不关心它的父元素。从这个问题我认为他们没有相同的父母。

我假设了一个相对的声明，我不建议使用 50%。是的，我假设这两个元素都是兄弟姐妹。

不管怎样，我们俩似乎都不满足那个家伙:)