web-dev-qa-db-ja.com

CSS内で数学を行うことは可能ですか？

Jquery accorion id #accordionおよびヘッダークラ​​ス名内のコンテンツの一部.simpleColor。ここで、.simpleColorに計算されたマージンを与えたいと思います。擬似的に...このように見えますが、

.simpleClass {
    margin-left: ((#accordion.width/2) - (.simpleColor.width/2));
}

可能であれば、これを実現するためにjavascriptなどの他の技術を使用することもできます。

javascriptjqueryhtmlcsscss3
36
TeaCupApp

calc と呼ばれるCSS関数があり、かなり良いサポートを得ています。構文は次のように機能します。

width: calc(50% - 100px);

（演算子の周りの空白は重要であることに注意してください）

これにより、CSSで真の動的計算サポートが可能になります。プリプロセッサを使用すると、静的な長さと静的な長さ、および相対的な長さと相対的な長さのみを組み合わせることができます。

Calcは、Chrome 19、Firefox 4、およびIE9からサポートされています。この機能は、広く使用できるほど広くサポートされていませんが、それほど遠くない将来になります。覚えて、楽しみにしています。

68
TimE

CSS内でネイティブに数学演算を行うことはできません。 JavaScriptを使用してページの読み込み時にCSSプロパティを変更できますが、これは苦痛であり、ページを読み込むたびに行う必要があるため、ページが遅くなります。

[〜＃〜] less [〜＃〜] 、 スタイラス 、または [〜＃〜] sass [ 〜＃〜] 。

これらの言語のいずれかを使用することの利点は、それらの言語から実際のCSSスタイルシートを生成できることです。また、関数、ミックスイン、変数などの利点も得られます。

8
Stanley Stuart
jQuery('.simpleClass').css('margin-left', (jQuery('#accordian').width() / 2) - (jQuery('.simpleColor').width() / 2) + 'px');

あなたがしたいことをすべきです。ただし、javascriptでこのようなことを行う必要があります。＃accordianと.simpleColorの幅が事前にわかっている（したがって、事前に計算されている）場合を除き、純粋なCSSではできません。

3
Jared Kipe

この例を参照してください。彼はcssで多くの数学を使用しました。

http://codepen.io/schoenwaldnils/pen/DLiyr

2
Sanu Uthaiah Bollera

他のテクノロジーを使用する場合は、lessを使用してみてください： http://lesscss.org/

1
Michael Silveira

CSSは純粋なスタイル定義でなければなりません。それにいくつかの計算を混ぜるのは好きではありません。私は私のJavaScriptでそれをするだろう

var accWidth=parseInt($("#accordion").css("width").replace("px",""));
var simpWidth=parseInt($(".simpleColor").css("width").replace("px",""));
var marginLeft=((accWidth/2)-(simpWidth/2));       
$(".simpleClass").css("margin-left",marginLeft);

作業サンプル http://jsfiddle.net/mzTRw/19/

1
Shyju