Berechnen der Breite von Prozent bis Pixel und dann minus Pixel für Pixel in WENIGER CSS

Ich werde die Breite in einem Element von Prozent bis Pixel berechnen, also werde ich -10px mit LESS und calc () minus -10px . Es ist möglich?

div {
    span {
        width:calc(100% - 10px);
    }
}

Ich benutze CSS3, calc()damit es nicht funktioniert:calc(100% - 10px)

Beispiel: Wenn 100% = 500 Pixel, also Breite = 490 Pixel (500-10);

Ich habe eine Demo zum Testen erstellt: http://jsfiddle.net/4DujZ/55/

Das Auffüllen sagt also immer: 5 (10px / 2), wenn ich die Größe ändere.

Kann ich es WENIGER tun ? Ich weiß, wie man in jQuery und einfachem CSS wie Randauffüllung oder sonst ... macht, aber ich werde versuchen, in WENIGER mit zu funktionierencalc()

Sie können den calcArgumenten entkommen, um zu verhindern, dass sie beim Kompilieren ausgewertet werden.

Anhand Ihres Beispiels würden Sie die Argumente einfach wie folgt umgeben:

calc(~'100% - 10px')

Demo: http://jsfiddle.net/c5aq20b6/

Ich finde, dass ich dies auf eine der folgenden drei Arten verwende:

Grundlegendes Entkommen

Alles in den calcArgumenten ist als Zeichenfolge definiert und vollständig statisch, bis es vom Client ausgewertet wird:

WENIGER Eingang

div {
    > span {
        width: calc(~'100% - 10px');
    }
}

CSS-Ausgabe

div > span {
  width: calc(100% - 10px);
}

Interpolation von Variablen

Sie können eine WENIGER Variable in die Zeichenfolge einfügen:

WENIGER Eingang

div {
    > span {
        @pad: 10px;
        width: calc(~'100% - @{pad}');
    }
}

CSS-Ausgabe

div > span {
  width: calc(100% - 10px);
}

Escape- und kompilierte Werte mischen

Möglicherweise möchten Sie einem Prozentwert entkommen, aber gehen Sie vor und bewerten Sie etwas bei der Kompilierung:

WENIGER Eingang

@btnWidth: 40px;
div {
    > span {
        @pad: 10px;
        width: calc(~'(100% - @{pad})' - (@btnWidth * 2));
    }
}

CSS-Ausgabe

div > span {
  width: calc((100% - 10px) - 80px);
}

Quelle: http://lesscss.org/functions/#string-functions-escape .

Ich denke, das width: -moz-calc(25% - 1em);ist, wonach Sie suchen. Und vielleicht möchten Sie diesem Link einen Blick für weitere Unterstützung geben

Oder Sie können das Randattribut wie folgt verwenden:

    {
    background:#222;
    width:100%;
    height:100px;
    margin-left: 10px;
    margin-right: 10px;
    display:block;
    }

Versuche dies :

width:auto;
margin-right:50px;