問題タブ [css-calc]

CSS calc 関数を別の CSS calc 関数内で使用するにはどうすればよいですか? この投稿によると、それは可能ですが、その例はありません。

私は関数として少ないクラスを持っています。私は calc() を使用してスケール値を設定します。これはクロムでは機能しますが、Firefox では機能しません。これは私のクラスです：

transform プロパティの計算を行いたい。そのために計算機能を使用することは可能ですか？

何かのようなもの：

しかし、変換のために

（もちろん、上記は機能しません）

calc()計算結果に幅を設定するために、cssで使用を開始しました。例えば：

どのように機能するかは知っていますが、上記の例calc()の代わりに、css で何が返されるかを知りたいだけです。calc(100% - 3px);

私の混乱は何ですか？

• 上記の例ではwidth:calc(100% - 3px);

• 100%幅は実際には100pxであり、これは実行時に CSS によって決定されます。

• したがって、計算された幅は100px-3px=97px97pxになり、それを% 97%右に変換すると?

しかし、今、2つの可能性があります

• 97pxが返され、幅として設定されます。

• 97%が返され、幅として設定されます。

私の質問は:

どちらの場合も、幅は に設定されますが、OR97pxの結果として何が返されますか?width:calc(100% - 3px);97px97%

このフィドルも見ることができます： http://jsfiddle.net/8yspnuuw/1/

編集：読んでください

友達に会いましょう: 簡単な例を見てみましょう:

レンダリングすると、子の幅が 160 px になることがわかっています。わかった！しかし、それはcssで設定されているものではありませんよね? css は % で設定し、ピクセル単位でレンダリングされます。

同様に、calc を使用すると、返されるか、または返されます%かpixel

または、私の質問を説明するために、BoltClocks の回答を読んでください。

自動幅と左右のマージンを持つコンテナがあります。

そして、このコンテナにはさまざまな要素があります。一部の要素はページの 100% (余白なし) にする必要があり、そのために calc() を使用します。

しかし、Safari (Windows 8 の 5.1.7) はそれを処理できないようです。Web Inspector に黄色の感嘆符が表示され、幅の規則が適用されません。

それで、これを回避する方法はありますか、それとも Safari を calc でうまく動作させることはできますか?

@supports(propertyName, value)でcalc 関数を使用する方法はありますか? つまり、calc 関数専用の場所です。<supports_condition>

calc() を使用して、単位ベースの値 (100%、5px など) で乗算または除算することは可能ですか?

たとえば、私は次のようなことをしたいと思っていました：

次のように解決されることを願っています (100% = 500px と仮定):

ただし、いくつかの実験の後、除算の分母として単位ベースの値を使用できないようです。

5px * 10pxまた、 orのように 2 つの値を一緒に乗算することもできないようです5px * 100%。

これを許可するのは 100% のケースでは意味がないことはわかっていますが、私のユースケースでは、120px が全体の幅の何パーセントであるかを知りたいです。計算。

それか、誰かがそれを書く別の方法を考え出すことができれば、それもうまくいくでしょう. 私は頭を悩ませ、何も思いつきませんでした。

私は3列のdivに取り組んでいます。Left 列と Mid 列は、幅 1005 ピクセルのラッパー内で固定幅 (それぞれ 57 ピクセルと 160 ピクセル) です。

問題は、流動的な幅である必要があり、残りのすべてのスペースをカバーする右側の列です。使ってみましたがうまくいきませwidth: (calc 100% - 217px);ん。

参考までにこのコードを用意しました。何が悪いのか指摘するためにあなたの助けが必要です。

http://jsfiddle.net/8weSA/1434/

画面全体を埋める必要がある3列のレイアウトがあるため、列で使用しています：

たとえば、私の画面の幅が 782px だとしましょう:

782 / 3 = 260.66̅

しかし、私が抱えている問題は、ピクセルを小数点以下 2 桁 (260.67) に丸める Internet Explorer にあります。

260.67 * 3 = 782.01

したがって、特定の幅では、ページが下に折り返されるときにページの 1/3 が失われます。

例を次に示します。

この問題を解決するエレガントな方法を知っている人はいますか?

を使用できることwidth: 33.33%はわかっていますが、100％の強打ではないことを知って泣いている私の中に小さな部分があります.

calc()たとえば、jQuery animate を使用してCSS を設定しようとしました。

calc()そして、それがjQuery animateで動作していないことに気付きました...

私はそれを行う方法があることを願っています, 私はそれを行うための同様の方法を望んでいません, 代替または回避策, calc() を設定したいです

これは不可能ですか？どういうわけか？

可能であれば、その方法を教えてください。