it-swarm.com.de

Berechnung der Breite von Prozent bis Pixel und dann minus Pixel in WENIGER CSS

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

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

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

Beispiel: wenn 100% = 500px, so ist die Breite = 490px (500-10);

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

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

Kann ich es in [~ # ~] weniger [~ # ~] tun? Ich weiß, wie man mit jQuery und einfachem CSS umgeht, wie Randabstände oder sonst ... aber ich werde versuchen, funktionale Abstände in [~ # ~] weniger [~ # ~] mit calc()

97
l2aelba

Sie können die Argumente calc maskieren, um zu verhindern, dass sie beim Kompilieren ausgewertet werden.

Anhand Ihres Beispiels würden Sie die Argumente einfach wie folgt umschließen:

calc(~'100% - 10px')

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


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

Grundlegende Flucht

Alles in den Argumenten calc 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 LESS-Variable in die Zeichenfolge einfügen:

WENIGER Eingang

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

CSS-Ausgabe

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

Mischen von maskierten und kompilierten Werten

Möglicherweise möchten Sie einen Prozentwert umgehen, aber gehen Sie vor und bewerten Sie etwas beim Kompilieren:

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 .

234
natchiketa

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

0