Ist es möglich, mit CSS calc () einen negativen Wert zu erhalten?

7

Nehmen wir an, wir haben einen Container, der im Ansichtsfenster zentriert ist ...

%Vor%

... und innerhalb dieses Containers habe ich einen anderen, der eine Breite von 100% der Darstellungsbreite haben muss. Ich könnte den Rand auf ... setzen.

%Vor%

... zum Beispiel. Die Sache ist, dass der Wert nicht -480px ist, aber tatsächlich die Breite des Darstellungsbereichs (960px) - die .zentrierte Breite / 2 ... alles gut und einfach mit calc (), nur brauche ich ein Ergebnis, das ein negativer Wert ist .

%Vor%

Ich habe versucht, das Los von 0 zu subtrahieren, um einen negativen Wert zu erhalten, aber nicht gehen.

Ich möchte JS nicht verwenden und ich habe nur Probleme in Webkit - nicht mit dem calc () - mein Problem ist, dass wenn ich es hacke, indem ich es mache ...

%Vor%

... meine Seite scrollt horizontal in Chrome / Safari.

Ihre Gedanken?

    
Jayx 08.08.2014, 13:48
quelle

3 Antworten

13

Ja, das ist möglich, bis zu einem gewissen Punkt. Der entscheidende Teil besteht darin, die Breite des Elements auf 100vw zu setzen und dann um die negative Hälfte der Breite des Darstellungsfelds zuzüglich der halben Breite des zentrierten Elements zu versetzen, wobei z. calc(-50vw + 200px) :

Demo-Geige

Angesichts der HTML

%Vor%

CSS

%Vor%     
SW4 08.08.2014, 13:51
quelle
9

EDIT: Ein einfacher Trick als die vorherigen: calc(0px - something) - mit einer Einheit - funktioniert, während calc(0 - something) nicht funktioniert. Siehe Fiddle 3

Diese "Tricks" funktionieren:

%Vor%

wo 0 - something nicht (zumindest bei deinem Beispiel).

Geige 1
Geige 2

    
FelipeAls 08.08.2014 14:11
quelle
0

Ich habe eine andere mögliche Lösung. Sie können um -2 getrennt werden, so erhalten Sie ein negatives Ergebnis

%Vor%     
sneduka 02.03.2018 11:32
quelle

Tags und Links