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

100

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()

l2aelba
quelle
1
Stylen Sie in der Regel keine Selektoren, die keine Semantik haben , wie divoder span.
Pavlo
1
Hier ist ein browserübergreifendes Mixin, das ich für die Verwendung von calc für jede CSS-Eigenschaft geschrieben habe: stackoverflow.com/a/24790931/916734
Patrick Berkeley

Antworten:

246

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 .

Natchiketa
quelle
2
Du rockst, Alter! Vielen Dank für diese Beispiele und Erklärungen. Wissen Sie zufällig, wie ich eine unbekannte Breite eines Containers (nennen wir es div.categories) mit WENIGER in 4 gleiche Teile teilen kann?
Shawn Spencer
5
@ShawnSpencer: Zwischen den Zeilen gibt es viel Dunkelheit. Können Sie eine JSFiddle erstellen, die veranschaulicht, was Sie lösen möchten? Ich kann versuchen, den Anwendungsfall zu erraten, aber ich bin gehemmt, weil ich nicht alle Details kenne, und ich bin sicher, dass Sie wissen, wie das geht - Ihre schlimmsten Hemmungen neigen dazu, Sie am Ende zu nerven.
Natchiketa
2
Ich bin nicht geneigt, mich zur Reife zurückzuziehen. Da ich mich für eine unkomplizierte CSS-Lösung entscheide und mit einer der Antworten die Dinge zum Laufen bringen konnte, bin ich vorerst gut. Vielen Dank, dass Sie angeboten haben, sich ein JSFiddle-Beispiel anzusehen. Sehr geschätzt.
Shawn Spencer
0

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

Akshay Khandelwal
quelle
-3

Oder Sie können das Randattribut wie folgt verwenden:

    {
    background:#222;
    width:100%;
    height:100px;
    margin-left: 10px;
    margin-right: 10px;
    display:block;
    }
THeBAckwardss
quelle
3
OP möchte, dass die Breite 10px kleiner als 100% ist. Ihr CSS macht das nicht. Es wird es breiter als 100% machen.
Andrew Barber
-3

Versuche dies :

width:auto;
margin-right:50px;
user1552559
quelle