Question

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

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

Answer 1

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

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

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

浏览器支持是OKish，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插件可以帮助它成为crossbrowser ...

你也可以在resize上绑定它。但它也不是好方法

将百分比与像素组合

3 个答案: