Ist es möglich, Mathematik innerhalb von CSS zu machen?

Ich habe jquery accorion id #accordion und einige der Inhalte innerhalb der Header-Klassenname .simpleColor. Jetzt möchte ich einen berechneten Rand zu .SimpleColor geben. In pseudo ... sieht es so etwas wie diese,Ist es möglich, Mathematik innerhalb von CSS zu machen?

.simpleClass { 
    margin-left: ((#accordion.width/2) - (.simpleColor.width/2)); 
}

Ich bin offen andere Technologien wie Javascript zu verwenden, um dies zu erreichen, wenn es möglich ist.

Quelle

2012-04-30 doNotCheckMyBlog

Das sieht aus wie Sie etwas horizontal zentrieren möchten. Hast du versucht margin: 0 auto; '? – Ryan

Haben Sie schon von [calc()] gehört (http://www.w3.org/TR/css3-values/#calc0) – Musa

Nö nie ... klingt scheint hilfreich – doNotCheckMyBlog

Es gibt eine CSS-Funktion calc genannt, die ziemlich gute Unterstützung zu bekommen beginnt. Die Syntax funktioniert wie folgt:

width: calc(50% - 100px);

(Beachten Sie, dass die Leerzeichen um die Betreiber von Bedeutung ist)

Dies ermöglicht echte dynamische rechnerische Unterstützung in CSS. Mit einem Präprozessor können Sie nur statische Längen mit statischen Längen und relative Längen mit relativen Längen kombinieren.

Calc wird seit Chrome 19, Firefox 4 und IE9 unterstützt. Das Feature wird nicht ausreichend unterstützt, um es umfassend zu nutzen, aber es wird nicht zu weit in die Zukunft gehen und es ist etwas, an das man sich erinnern und auf das man sich freuen kann.

Quelle

2013-05-29 03:26:08 TimE

Funktioniert perfekt in Chrome, Firefox und IE, wie Sie auf Win7 und 8 erwähnt haben. Danke! Get Padding und eine 100% Breite div war so ein Schmerz, und die Verwendung von Javascript für etwas so einfach schien wie eine Verschwendung. Das ist viel besser! –

Sie können auch in [box-sizing: border-box; '] (http://www.paulirish.com/2012/box-sizing-border-box-ftw/) schauen. Das bedeutet, dass Padding von der Breite subtrahiert wird, anstatt es hinzuzufügen, und es hat eine bessere Unterstützung als calc, zurück zu IE8, und hat eine [Polyfill für IE6/7 verfügbar] (https://github.com/Schepp/box-sizing- Polyfill), wenn Unterstützung benötigt wird. IE8 hat immer noch einen beträchtlichen Marktanteil, daher empfehle ich die Verwendung von "Box-Sizing" für Ihre Bedürfnisse. – TimE

Sie haben das Häkchen gemacht :) danke –

Wenn Sie andere Technologie zur Verwendung von offenen, versuchen Sie weniger mit: http://lesscss.org/

Quelle

2012-04-30 03:57:32

Spot on! Danke Michael – doNotCheckMyBlog

jQuery('.simpleClass').css('margin-left', (jQuery('#accordian').width()/2) - (jQuery('.simpleColor').width()/2) + 'px');

Sollte das tun, was Sie wollen. Aber Sie müssen etwas in Javascript tun, Sie können es nicht in reinem CSS tun, außer die Breiten für #accordian und .simpleColor sind im Voraus bekannt (und so im Voraus berechnet).

Quelle

2012-04-30 04:00:58

Es ist nicht möglich, mathematische Operationen innerhalb von CSS nativ auszuführen. Sie können JavaScript verwenden, um die CSS-Eigenschaften beim Laden der Seite zu ändern. Dies ist jedoch sehr mühsam und muss bei jedem Seitenladen durchgeführt werden, damit die Seite langsam wird.

Sie müssen einen CSS-Präprozessor wie LESS, Stylus oder SASS verwenden.

Der Vorteil einer dieser Sprachen besteht darin, dass Sie aus ihnen tatsächlich CSS-Stylesheets generieren können. Sie erhalten auch Vorteile wie Funktionen, Mixins, Variable und mehr.

Quelle

2012-04-30 04:01:04

Spot on, ich habe bekommen, was ich brauchte, aber ich möchte Michaels Antwort akzeptieren, als er zuerst darauf hinwies :) danke btw – doNotCheckMyBlog

Ich glaube, das CSS sollte reine Stildefinition sein. Ich mag es nicht, einige Berechnungen damit zu mischen. Das würde ich in meinem Javascript tun

var accWidth=parseInt($("#accordion").css("width").replace("px","")); 
var simpWidth=parseInt($(".simpleColor").css("width").replace("px","")); 
var marginLeft=((accWidth/2)-(simpWidth/2));  
$(".simpleClass").css("margin-left",marginLeft);

Arbeitsprobe http://jsfiddle.net/mzTRw/19/

Quelle

2012-04-30 04:08:06 Shyju

Statt parseInt ($ ("# accordion"). css ("width"). "px", "")) können Sie einfach $ ("# accordion"). width() verwenden, um den ganzzahligen Wert zu erhalten. –

Siehe dieses Beispiel .. Er hat viel Mathematik in CSS verwendet.

http://codepen.io/schoenwaldnils/pen/DLiyr

Quelle

2014-01-28 07:50:26

Beachten Sie, dass [Link-only Antworten] (http://meta.stackoverflow.com/tags/link-only-answers/info) entmutigt werden, SO Antworten sollten der Endpunkt sein eine Suche nach einer Lösung (im Gegensatz zu einem weiteren Zwischenstopp von Referenzen, die im Laufe der Zeit veralten). Bitte beachten Sie, dass Sie hier eine eigenständige Zusammenfassung hinzufügen und den Link als Referenz beibehalten. – kleopatra

Hey! Das ist SCSS! nicht CSS. Der Compiler berechnet den Partner –

Ist es möglich, Mathematik innerhalb von CSS zu machen?

Antwort

Verwandte Themen