javascript - 将百分比与像素相结合

Question

有没有办法将百分比与css中的像素结合起来？例如，我希望 div 的宽度为 50% + 10px。

Javascript / Jquery 插件是可接受的解决方案。但是一些全局工作的东西，不需要为任何额外的块编写额外的代码。

Answer 1

这是 CSS 中的一个“硬”问题，直到最近才有修复。CSS 中的修复是使用该calc方法，如下所示：

http://dabblet.com/gist/3966215

请注意，dabblet 会自动添加供应商前缀，因此您需要使用：

-webkit-calc()
-moz-calc()
-ms-calc()
-o-calc()
calc()

浏览器支持还可以， http : //caniuse.com/#search=calc - 简而言之，它是 IE9 及更高版本，而不是 Opera。

据我所知，JS 中没有任何 polyfill 可以使其在旧浏览器中工作。

Answer 2

div { width: calc(50% + 10px); }

在 IE9 之前不起作用。

Answer 3

我希望它会有所帮助

CSS

#testWrapper {
    width: 500px;
    background-color: #aaa;
} 

.test {
    width: 50%;
    background-color: #ccc;
}​

JS

$(function(){
  window.calcWidth = function(el, property, data){
    $(el).css(property, data);
      alert($(el).width());
  }

  calcWidth('.test', 'width', '+=50px');
});

HTML

<div id="testWrapper">
    <div class="test">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin lacus urna, congue eu cursus nec, aliquet non lorem. Sed ullamcorper tempus enim, a vulputate dui suscipit vulputate.
    </div>
</div>

jsfiddle.net :)

但老实说，我会使用其他人展示的那些 CSS 方式。肯定有一些 jQuery 插件可以帮助它跨浏览器...

您也可以通过绑定调整大小来做到这一点..但这也不是好方法