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()
div
oderspan
.Antworten:
Sie können den
calc
Argumenten entkommen, um zu verhindern, dass sie beim Kompilieren ausgewertet werden.Anhand Ihres Beispiels würden Sie die Argumente einfach wie folgt umgeben:
Demo: http://jsfiddle.net/c5aq20b6/
Ich finde, dass ich dies auf eine der folgenden drei Arten verwende:
Grundlegendes Entkommen
Alles in den
calc
Argumenten ist als Zeichenfolge definiert und vollständig statisch, bis es vom Client ausgewertet wird:WENIGER Eingang
CSS-Ausgabe
Interpolation von Variablen
Sie können eine WENIGER Variable in die Zeichenfolge einfügen:
WENIGER Eingang
CSS-Ausgabe
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
CSS-Ausgabe
Quelle: http://lesscss.org/functions/#string-functions-escape .
quelle
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 gebenquelle
Oder Sie können das Randattribut wie folgt verwenden:
quelle
Versuche dies :
quelle