39

jqueryaccorionid#accordionとヘッダークラ​​ス名内のコンテンツの一部があります.simpleColor。ここで、計算されたマージンを.simpleColorに与えたいと思います。疑似で...それはこのように見えます、

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

可能であれば、javascriptなどの他のテクノロジーを使用してこれを実現することもできます。

4

5 に答える 5

74

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

width: calc(50% - 100px);

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

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

この時点で、calcは広範囲にわたるサポートを実現しており、レガシーブラウザをサポートするための特別なニーズがない限り、安全に使用できるはずです。

于 2013-05-29T03:26:08.063 に答える
8

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

LESS、Stylus、SASSなどのCSSプリプロセッサを使用する必要があります。

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

于 2012-04-30T04:01:04.863 に答える
3 
jQuery('.simpleClass').css('margin-left', (jQuery('#accordian').width() / 2) - (jQuery('.simpleColor').width() / 2) + 'px');

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

于 2012-04-30T04:00:58.243 に答える
2

CSSで数学を行うことができます。例：

height: calc(100% - 20%);

CSSはさまざまな単位も処理するため、これも機能します。

height: calc(100% - 20px);

さらに、min（）、max（）、clamp（）も追加され、次のような計算が可能になります。

height: min(calc(100% - 20px), 50%);

  1. min（）：最小値を取得します。
  2. max（）：最大値を取得します。と
  3. クランプ（）：上限と下限を指定して値を制限します。
于 2020-07-14T23:48:03.540 に答える
0

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/

于 2012-04-30T04:08:06.753 に答える