Schwebende Elemente nach unten
Mein Problem ist sehr spezifisch und wird jeden Webentwickler von dem Moment an verfolgen, in dem er / sie es lesen wird. Also sei vorsichtig!
Ich habe ein Layout für eine Website geplant, die ich erstelle. Die Idee ist, dass auf der Seite gekippte <hr/> -Elemente vorhanden sind, auf die der Text umläuft (siehe Bild unten. Die schwarze Linie stellt <hr/> dar)
Was Sie sehen, sind einige orangefarbene Streifen. Jedes einzelne davon ist ein Floating-Element mit den Breiten 10px , dann 20px , dann 30px usw.
Die schwarze Linie gibt an, wo sie stehen bleiben und wo sie den Text abgeschnitten haben.
Der große orange Bereich ist, wie Sie sich vielleicht denken können, ein Floating-Element mit einer Breite von 0 und einer Höhe von 100% von dessen Eltern minus der Höhe der 70 anderen Floating-Elemente (die Streifen), was% co_de ist %.
Das Problem: Das scheint nicht möglich zu sein. Was ich bekomme ist das:
Da diese kleinen Streifen jeweils 70px high sind, werden sie angezeigt, egal was passiert. Aber der Große hängt von der Größe seiner Eltern ab. Wenn ich die Größe des Elternteils korrigieren sollte, würde es funktionieren. Aber ich möchte, dass die Box dynamisch ist. Dies bedeutet, dass ich in der Lage sein sollte, den Text darin zu ändern. Wenn ich die Höhe korrigieren möchte, sieht die Skalierung der Seite verheerend aus.
Was ich tun muss, ist folgendes: Das erste, große, schwebende Element sollte den benötigten Platz in 1px einnehmen, ohne seinem Elternteil eine feste Höhe zu geben, während es schwebend bleibt.
Ich werde die Person, die das Problem löst, mit all dem Ruf belohnen, den ich einbringen kann, da dies mich seit Monaten belästigt.
Für Leute, die versuchen, das Problem zu lösen. Es gibt einige Gedanken, die helfen können:
- Tabellenzellen können Elemente an ihrer Unterseite ausrichten
- Ich habe versucht, mich auf viele Arten zu drehen. Schade, dass es keinen umgekehrten Text gibt.
- Ich habe versucht, Ränder, Paddings und Ränder zum ersten Floating Div hinzuzufügen. Keine Kombination hat bisher funktioniert.
- Ich möchte eigentlich nicht, dass die Elemente schweben. Dies ist genau der Weg, den ich gewählt habe, weil ich keine andere Möglichkeit kenne, Text um ein Element zu legen. Sie können alles versuchen, was Sie wollen, solange der Text darin geändert werden kann, und es sieht genauso gut aus, wenn Sie es wie gewohnt skalieren.
- Ich denke, die einzige Lösung ist die Verwendung von Javascript, um zu berechnen, welche Höhe das div benötigt.
Hier ist der gesamte Code in eine Fiddle
gepacktEDIT: Ich denke, ich kenne die Lösung. Ich weiß einfach nicht, wie ich es programmieren soll.
Bei Javascript sollte der Browser die Höhe des Inhalts (Text, Bilder, deren Ränder usw.) im Container berechnen. Dann sollte (100% - 70px) auf diese Höhe wechseln.
Nachdem dies geschehen ist, sollte #lw um 1 Pixel verkleinert werden. Danach sollte überprüft werden, ob sich der Inhalt in der Höhe geändert hat.
Wenn dies passiert ist, sollte der Browser überprüfen, ob die Höhe der Inhaltshöhe größer als die Höhe von #lw + 70px ist.
Wenn es nicht höher wird, sollte der Vorgang wiederholt werden. Wenn dies der Fall ist, sollte #lw erneut um 1 Pixel verkleinert werden, und der Prozess sollte aufhören.
Bei der Größenänderung des Fensters sollte der Prozess von Anfang an beginnen.
Das sieht nach einem höllischen Job aus, und ich würde dankbar die Herausforderung annehmen, wenn ich JS kennen würde. Ich schätze ich gehe nach Codecadamy.
BEARBEITEN:
In der Zwischenzeit habe ich eine weniger komplexe Version dieses Problems entwickelt. Ich habe in css-Formen geschaut und herausgefunden, dass dies mir erlauben wird, was die 70 schwebenden Elemente mit einem Element machen. Ich habe eine andere Reihe von Dateien erstellt, aber es gibt eine js-Datei benötigt, damit es funktioniert. Was ich hier mache, ist das Einfügen von HTML und CSS als Code und die Verknüpfung mit dem js-Code.
Wie in der älteren Version sollte der Code die optimale Höhe messen. In meinem Code habe ich ein #lw -Tag mit einer genauen Beschreibung dessen, was passieren soll, hinzugefügt.
Ich glaube, ich fange langsam an zu faulenzen, da ich keine Angaben zum tatsächlichen Javascript-Code machen kann.
HTML
%Vor%CSS
%Vor%Verknüpfen Sie mit dem rohen js-Code Ссылка
3 Antworten
Da jeder auf jede Art Javascript-Antworten postet, werfen wir eine tatsächliche Lösung in den Haufen. Das Problem selbst bei Verwendung von Javascript ist, dass es keine definierte Möglichkeit gibt, die endgültige Höhe von #lw zu 'berechnen', da das Verhalten des Textumwickelns unmöglich ist.
Hier ist JSFiddle der Lösung .
Modern CSS hat ein spezielles Modul für solche Aufgaben: CSS Shapes . Es gibt ein Polyfill , das von Adobe erstellt wurde. Vielleicht hilft es?
Geben Sie dem oberen div eine feste Höhe (temporär). Dies ist die Höhe, in der der nicht gewinkelte Text angezeigt werden soll. Es sieht so aus, als ob Sie bereits eine feste Höhe für den Boden bei 70px haben.
%Vor%Um unterschiedliche Bildschirmhöhen zu berücksichtigen, müssen wir die richtige Dimension für das obere div berechnen und subtrahieren, was Sie auf der Unterseite benötigen.
%Vor%Wir werden die Größe jedes Mal ändern, wenn sich das Browserfenster ändert. Auf diese Weise werden das obere und das untere Ende synchronisiert.
In der Seite html add (basic)
%Vor%Sie können nicht 100% verwenden und erwarten, dass es funktioniert, denken Sie daran, dass Sie den unteren Teil subtrahieren müssen. Ich würde damit beginnen, etwa 150 - 200 px zu subtrahieren, um zu starten, so dass Sie nicht in den unteren Bildschirmrand laufen und durcheinander kommen. Die Seite wird dynamisch agieren und Sie können die Seite nach oben und unten skalieren.
Das ist mein Versuch, das zu verstehen ...
Tags und Links javascript html css