Question

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

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

我想获得孩子的宽度（以px为单位）并减去180px。这可能吗？

标记：

<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 */
}

Answer 2

要专门回答您的问题，您可以使用calc

-webkit-calc(100% - 180px)
-moz-calc(100% - 180px)
calc(100% - 180px)

但是，我建议您使用margin

Answer 3

使用css中的calc函数：

width: calc(100%-180px);

Answer 4

calc是anwser：IE9 +：http://caniuse.com/calc

JSFiddle Demo

CSS

#main {
    margin:25px auto;
    width:90%;
    max-width:1200px;
    border:1px solid green;
    padding:10px;
}

.block {
    border:1px solid red;
    height:25px;
    width: calc(100% - 180px);    
}

可能建议您使用box-sizing:border-box以避免混淆。

NB。如果内部div要居中，那么一个简单的90px边缘也可以起作用：http://jsfiddle.net/Paulie_D/g2bFT/2/

使用动态宽度的SASS / Compass Math

4 个答案: