css - 使用变量和百分比值在页面上定位元素

标签 css sass

假设我有一个这样的元素。

$div1-height: height(icon);
.div1 {
  left: 0;
  top: 25%;
  height: $div1-height; 
}

然后我在某处有另一个 div,我想使用该位置在屏幕上以数学方式定位它。从概念上讲,我想这样做。

.div2 {
  top: 25% + $div1-height;
}

这样的事情可能吗?怎么办?

最佳答案

25% 是在运行时评估的,因此在页面呈现之前计算它是行不通的。你可以像这样使用 calc

top: calc(25% + #{$div1-height});

但它可能没有最好的浏览器支持。我会考虑重新设计您的其他一些 css,这样您就不必使用 calc。

关于css - 使用变量和百分比值在页面上定位元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21684317/

相关文章:

html - 向 CSS 网格布局中的每一列添加滚动

html - CSS flex : Vertically centered items that are taller than the viewport

html - 引用特定标签的符号不能在 SassMeister 上编译

css - Shopify 造型

html - 我无法覆盖导航栏中的 Bootstrap

javascript - Jquery Enable button on click div 并显示相应的元素

css - 如何通过以圆形方式堆叠 div 来创建 Lollipop 形状?

javascript - 如果没有第二个 div,如何为第一个 div 设置 css

ruby-on-rails - 仅导入主文件时,SASS 变量不起作用

ruby-on-rails - 如何在 Rails 3.1 中管理 CSS 样式表资源?