css - SASS/Compass Math 使用动态宽度

Question

我有一个灵活宽度 (90%) 的容器 div。我希望它的子 div 在宽度方面总是比父 div 小 180px。

我知道这可以在 JS 中完成，但我正在尝试尽可能多地使用 CSS。我觉得这超出了 CSS 的能力范围，但我想确定一下。

我想获取 child 的宽度(以像素为单位)并减去 180 像素。这可能吗？

标记:

<div id="main">
    <div class="block"></div>
</div>

SCSS:

#main {
  width: 90%;
  max-width: 1600px;

  .block {
    /* incorrect code: */
    width: WIDTH_OF_PARENT - 180px;
  }
}

Answer 1

CSS calc() 函数的支持相当低(尤其是在移动浏览器中)。如果您想最大化浏览器支持，请改用边距:

http://jsfiddle.net/CV5nb/

#main {
    width: 90%;
    max-width: 1600px;
}
.block {
    margin-left: 180px; /* or margin-left: 90px; margin-right: 90px */
}