CSS-Element bekommen Dimension von sich selbst basierend auf Inhalt

Ich weiß, dass dies etwas ist, wofür wir JavaScript verwenden würden, aber ich frage mich, ob es in den nächsten Versionen von CSS möglich oder geplant ist.CSS-Element bekommen Dimension von sich selbst basierend auf Inhalt

Ich arbeite auf einer kleinen Plattform und es gibt viele relative/absolute Positionen. Der Inhalt ist dynamisch, daher ist es nicht die beste Lösung, die statische Breite anzugeben, und die Elemente müssen irgendwie zentriert sein. Ich habe es fast ohne Anzeigefehler nur mit CSS möglich gemacht, aber es wäre toll, wenn es in css so etwas wie this gibt.

heutige Code (SASS):

element 
    position: absolute 
    top: 100px 
    right: 50% 
    margin-right: -50px (static width in %/px/em/rem/...)

Etwas, was ich darüber nachdachte:

element 
    position: absolute 
    top: 100px 
    right: calc(50% - this.width/2)

Also, diese Frage nicht zu breit machen. Kennen Sie einen Weg, um dieses Verhalten in der heutigen CSS zu implementieren? Und wenn nicht, weißt du, ob es Pläne gibt, es in Feature Releases zu implementieren?

Quelle

2016-11-19 Dawid Zbiński

Was sollte dies verweisen auch in diesem Beispiel? Das Element selbst? Macht keinen Sinn, weil Sie das Element nicht auf diese Weise in seine eigene Breitenberechnung einbeziehen können. – CBroe

haben Sie mit CSS-Variablen versucht: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables? – caramba

_ "und es gibt eine Menge relativer/absoluter Positionen" _ - das klingt vielleicht eher nach dem wirklichen Problem. Vor allem absolute Positionierung ist etwas, das man eher sparsam einsetzen sollte, und nicht das gesamte Layout zugrunde legen. Ausnahmen gibt es natürlich; aber wird die meiste Zeit ziemlich unflexibel sein. Und ehrlich gesagt, am häufigsten sieht man diese Layout-Methode, die von Leuten benutzt wird, die CSS noch nicht richtig gelernt haben ... – CBroe

Nein, es ist heute nicht möglich, eine Eigenschaft von sich selbst zu referenzieren.

Wird es kommen? Hoffnung .. so

In Ihrer speziellen Probe, ein absolutes positionierte div Zentrieren, die dynamischen Inhalte hat, Sie transform: translate

Randnotiz verwenden können: CSS hat viele Eigenschaften, wo, wenn sie kombiniert wird, kann man immer noch erreichen ähnliche Wirkung wie bei unterhalb Probe

div { 
 
    position: absolute; 
 
    top: 100px; 
 
    border: 1px solid; 
 
    right: 50%; 
 
    transform: translateX(50%); 
 
}

<div>Centered with dynamic content</div>

Quelle

2016-11-19 11:50:34 LGSon

Danke @LGSon. Ich habe nicht an die Transformation gedacht, als ich sie zentrierte, wirklich nützlicher Trick. Ich denke, ich kann die Antwort als richtig bezeichnen, da sie den "Kern" meiner Frage richtig beantwortet. –

CSS-Element bekommen Dimension von sich selbst basierend auf Inhalt

Antwort

Verwandte Themen