46

次のような状況があります。

div {
    width: calc((100% / 11) - 9.09px);
}

コンテキストでは、100%= 1440px、および9.09pxsass を使用した数学で生成されます。

結果は次94.55pxのcalcようになります。94.54px

小数点以下を切り捨てるにはどうすればよいですか?

編集:例.

4

4 に答える 4

16

残念ながら、CSS には数値を丸める (または天井/床) ためのネイティブな方法はありません。

ただし、Sassを使用していると述べました。指定された精度で数値を丸めたり、下限を設定したり、上限を設定したりできる小さな Sass ライブラリを見つけました。

たとえば、 had があった場合、which を返すと94.546使用できます。decimal-floor(94.546, 2)94.54

calc()残念ながら、 CSS を使用してオンザフライで計算する必要がある場合、これは役に立たない可能性があります。ただし、Sass を使用して事前に計算しwidthて床に置くことができれば、ニーズに合うでしょう。考えられる解決策は、@mediaクエリを使用してブレークポイントを設定し、それらのブレークポイントを Sass の前処理で使用することです。

于 2016-06-10T19:12:38.687 に答える
1

問題が 1 ピクセルの丸め誤差に関連する視覚的な不一致である場合、ほとんどの場合、実際に丸める必要はありません。比較的簡単な解決策は、アイテムの 1 つが残りのスペースをすべて占有するようにすることです。

フレックス シナリオでは、レイアウトをラップする必要がない場合は、可能な限り目立たない効果を得るために、中央の項目の 1 つを選択することもできます。

.some-block {
    width: calc( ( 100% / 11 ) - 9.09px );
    flex-shrink: 0;
}

.some-block:nth-of-type(5) {
    // Will attempt to take the whole width, but its siblings refuse to shrink, so it'll just take every bit of remaining space.
    width: 100%;
}

正確な CSS のケースによっては、パディングまたはマージンを使用し、場合によっては追加のネストされた要素を使用することで、ピクセルの減算を完全に回避できる可能性があります。そうすれば、CSScalc()は不要になり、すべてが Sass で実行できるようになります。Sass には、はるかに強力な数学ツールがあり、クライアントが計算を実行する必要はありません。

また、フレックス コンテキストでは、すべての要素を等しくすることが目標である場合、計算はまったく必要ない場合があります。詳細については、この質問を参照してください。

表では、セルの幅は左から右に計算されるため、同様のトリックを使用できますが、列の幅は左から右に決定されるという概念がなくwidth: 100%、最後のセルに与える必要があります。flex-shrink

.my-table {
    table-layout: fixed;
}

.table-cell {
    width: calc( ( 100% / 11 ) - 9.09px );
}

.table-cell:last-of-type {
    // Will attempt to take the whole width, but since previous column widths have already been determined, it cannot grow any further than its allocated width plus any stray pixels.
    width: 100%;
}
于 2020-12-01T16:06:40.427 に答える
1

CSS を動的に生成する場合は、round()、ceil()、floor()、abs()、mod()、sign() などの単純な関数を実行する小さなクラスを作成しました。これを使用して、複雑な calc を構築できます。引数として相互に渡すことができるルール。「var(--my-variable)」をパラメーターとして使用すると、CSS 変数が使用されます。注: 生の数値で最適に機能し、最後にピクセル (など) に変換するためのユーティリティ関数 toUnit があります。

スタイルを設定する例としてjqueryのように呼び出すことができます：

 $('#my-element').css('width', `${cssHack.toUnit(cssHack.round(1000/3),'px')}`)

以下はクラスのコードです (es6、依存関係なし):

class cssHack
{
    //primary used for dynamic css variables-- pass in 'var(--dynamic-height)'
    static toUnit(val,unit)
    {
        unit='1'+unit;
        return ` calc(${val} * ${unit}) `;
    }

    static round(val)
    {
        // the magic number below is the lowest possible integer, causing a "underflow" that happily results in a rounding error we can use for purposeful rounding.
        return ` calc(${val} * ${Number.MIN_VALUE} / ${Number.MIN_VALUE}) `;
    }

    static abs(val)
    {
        return ` max(${val}, calc(${val} * -1)) `;
    }

    static floor(val)
    {
        return cssHack.round(` calc(${val} - .5) `);
    }

    static ceil(val)
    {
        return cssHack.round( `calc(${val} + .5) `);
    }

    static sign(val)
    {   
        let n = ` min(${val},0) `; //if val is positive then n =0. otherwise n=val.
        let isNegative= ` min(${cssHack.ceil(cssHack.abs(n))},1) `;
        let p = ` max(${val},0) `; //if val is negative then n=0, otherwise n = val;
        let isPositive= ` min(${cssHack.ceil(cssHack.abs(p))},1) `;
        return ` calc(${isPositive} + calc(${isNegative} * -1)) `;
    }

    static mod(val, base)
    {
        let abs = cssHack.abs(val);
        let div = ` calc(${abs} / ${base})`;
        let dec = ` calc(${div} - ${cssHack.floor(div)})`;
        return cssHack.round(` calc(${dec} * ${base}) `);
    }
}
于 2021-11-11T18:09:13.567 に答える