2

我宁愿不在我margin-left的一个元素上为我的像素值硬编码：

.my_element {
  margin-left: 75px;
}

我想做的就是让它margin-left等于另一个元素的宽度+ 20px。

.other_element {
  width: auto;
}

.my_element {
  margin-left: [somehow-reference-other-element-width];
}

我知道如果我有一个静态宽度，我可以使用.scss变量 ( $myWidth: 75px;) 并将其设置为两者，但我想我宁愿使用auto.

4

1 回答 1

0

width: auto在考虑边距和边框后填充父容器。我假设.other_element是另一个容器的子容器，它必须有一些静态宽度，否则它会填满整个窗口宽度。如果是这样，您可以通过 scss 变量引用该父宽度并减去子元素的任何边距和边框。

类似于以下内容：（这是小提琴）

$parent_width: 150px;
$other_margin: 20px;
$other_border: 5px;

.some_parent {
    width: $parent_width;
}

.other_element {
    width: auto;
    // optional margin and border
    margin: $other_margin;
    border: $other_border;
}

.my_element {
    margin-left: $parent_width - $other_margin - $other_border + 20;
}

很难想象您正在寻找什么，但是如果您正在制作响应式设计，这应该适用于百分比、ems 或其他任何东西。

于 2013-05-17T21:00:38.597 回答