Ich baue einen html / javascript Theme Designer für ein CMS. Elemente sind absolut positioniert und können mit der Maus verschoben / skaliert werden und / oder editierbaren Text enthalten, dessen Höhe durch die Anzahl der Zeilen bestimmt werden kann. Allerdings stoße ich auf das Problem, bei dem die Höhe eines übergeordneten Elements nicht auf seine absolut positionierten untergeordneten Elemente erweitert wird.
Minimaler Code (auch auf JSFiddle hier ):
%Vor%Eine CSS-Lösung ist ideal und ich mache mir keine Sorgen um ältere Browser. Aber ich suche hauptsächlich nach einer Möglichkeit, zu verhindern, dass JavaScript auf jeder Seite ausgeführt werden muss, wobei ein erstelltes Design verwendet wird, um die Höhe festzulegen (da Seiten mit demselben Thema möglicherweise unterschiedliche Textmengen haben).
Es gibt bereits einige ähnliche Fragen, aber ihre akzeptierten Antworten (z. B. keine absolute Positionierung) funktionieren in meinem Fall nicht. Es sei denn, es gibt eine Möglichkeit, mehrere Schichten ziehbarer / veränderbarer Elemente zu haben, ohne dass sie Position sind: absolut.
Ich habe eine pure-css-Lösung gefunden! Zusammenfassend:
JSFiddle hier oder Code unten:
%Vor%Absolut positionierte Elemente werden aus dem Fluss entfernt und von anderen Elementen ignoriert
Die einzige Möglichkeit besteht darin, die untergeordnete Position auf position: relativ zu setzen. Auf diese Weise können Sie sie mithilfe von rechts, links, oben und unten verschieben und ändern Sie auch die übergeordnete Anzeige in display: inline-block
Wenn Sie möchten, dass die Kinder absolut positioniert sind, können Sie mit dem folgenden Skript die Größe des Containers ändern: Ссылка
%Vor%Tags und Links javascript html css html5 wysiwyg