结合百分比与像素

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

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

2012-10-27 Alvarez

这是CSS中的一个'硬'问题，只是最近才有任何修复。 CSS中的解决方法是使用calc方法，如演示了此：

注意dabblet自动添加供应商前缀，所以你需要使用：

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

浏览器支持OKish ，http://caniuse.com/#search=calc - 简而言之就是IE9以上，而不是Opera。

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

来源

2012-10-27 20:59:36

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

在IE9之前不工作。

来源

2012-10-27 20:58:32

我希望这将有助于

CSS

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

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

$(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插件，帮助，使其跨浏览器...

，你也可以用它resize..but结合上做到这一点也并不好办法

来源

2012-10-27 21:29:18 Maksym

它帮助了一点，但我一直在寻找一些可以在全球范围内工作而无需为任何附加块添加额外的JavaScript代码css calc函数正是我需要的，唯一的问题是跨浏览器支持。 - 无论如何都投票支持你的答案，谢谢。 – Alvarez

结合百分比与像素

回答

相关问题