픽셀과 백분율을 결합하십시오.

Question

%를 CSS의 픽셀과 결합하는 방법이 있습니까? 예를 들어, div 너비를 50 % + 10px로 지정합니다.

Javascript/Jquery plugin은 허용되는 솔루션입니다. 그러나 전 세계적으로 작동하며 추가 블록에 대한 추가 코드를 작성할 필요가 없습니다.

Answer 1

CSS에서 '힘든'문제입니다. 최근에 수정 된 사항이 있습니다. 여기 시연으로 CSS의 수정은 calc 방법을 사용하는 것입니다

http://dabblet.com/gist/3966215

가 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 방식을 사용하고 싶습니다. 거기는 crossbrowser 수 있도록하는 데 도움이 몇 가지의 jQuery 플러그인 ...

또한

당신은 그것을 resize..but에 바인딩을 할 수도 그것은 조금 도움이되지 좋은 방법