3

cssでパーセンテージとピクセルを組み合わせる方法はありますか? たとえば、div の幅を 50% + 10px にしたいとします。

Javascript / Jquery プラグインは許容可能なソリューションです。ただし、グローバルに機能し、追加のブロック用に追加のコードを記述する必要がないもの。

4

3 に答える 3

4

これはCSSの「難しい」問題であり、最近修正されたばかりです。CSSでの修正は、calcここでデモされているように、メソッドを使用することです。

http://dabblet.com/gist/3966215

dabbletはベンダープレフィックスを自動的に追加するため、次を使用する必要があることに注意してください。

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

ブラウザのサポートはOKです。h​​ttp ： //caniuse.com/#search=calc-要するに、IE9以降であり、Operaではありません。

私の知る限り、これを古いブラウザで機能させるためのポリフィルはJSにはありません。

于 2012-10-27T20:59:36.270 に答える
1 
div { width: calc(50% + 10px); }

IE9より前では機能しません。

于 2012-10-27T20:58:32.967 に答える
1

それが役立つことを願っています

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プラグインは間違いなくいくつかあります...

また、サイズ変更時にバインドすることもできますが、それも良い方法ではありません

于 2012-10-27T21:29:18.987 に答える