Wie stelle ich einen Binärbaum mit Tabellen (html) dar?
Hier ist ein Brain Teaser für die Mutigen. Ich bin seit Tagen dabei und kann einfach nicht mit der Lösung kommen.
Ich wollte mit so etwas kommen:
Nur HTML, CSS und PHP verwenden.
Ich kam näher, aber nicht ganz so, wie ich es erwartet hatte. Hier ist der Code in PHP und hier ist die Ausgabe .
%Vor%Wenn jemand weiß, wie man einen Binärbaum oder ein Dendrogramm darstellt oder einen intelligenteren Code erstellt, lass es mich wissen!
3 Antworten
Ich habe so etwas gemacht und divs wie @HugoDelsing benutzt. Die Art, wie ich die Zeilen behandelte, bestand darin, jedes Paar in vier vertikal gestapelte Divs aufzuteilen:
- Der erste Spieler (border-bottom)
- Ein Abstand zwischen 1. und 2. Spieler (rechts)
- Der zweite Spieler (border-bottom und border-right)
- Ein Abstandhalter vor dem nächsten Paar (keine Rahmen)
Jeder von diesen erhält 1/4 der Höhe des Paares *, und die Gesamthöhe eines Paares verdoppelt sich, wenn Sie sich nach rechts bewegen. Wenn Sie keine Zweierpotenz haben, füllen Sie die Slots mit Platzhaltern, um alles auf die richtige Größe zu schieben.
* Die unteren Ränder werden die Höhe um 1 absenken. Berücksichtigen Sie dies beim Formatieren Ihrer Zeilen.
Weitere Hinweise
Die Spacer-Divs sind möglicherweise nicht notwendig, aber für mich haben sie den Abstand leicht gehandhabt und die verschiedenen Spalten korrekt ausgerichtet.
Ich habe Inline-Stile verwendet, die von PHP für die Höhen ausgefüllt wurden, also hatte ich keine willkürliche Tiefenbegrenzung oder Berechnungen, die in CSS fest programmiert waren.
BEARBEITEN
OK, hier ist der Codez:
Ich würde nicht eine Tabelle, sondern Divs verwenden.
- Erstellen Sie einen Spaltencontainer div mit einer relativen / absoluten Position mit einer festen Breite (zB: 200px) für jeden col.
- Jeder Spaltencontainer hat innere divs mit einer Höhe und einer Zeilenhöhe, die dem doppelten des vorherigen Spaltencontainers entspricht
- Erstellen Sie ein langes schwarzes vertikales Linienbild (Länge mindestens die Hälfte der größten Höhe der inneren divs in jeder Spalte. Starten Sie die Linie mit einer horizontalen Linie von 200px breit nach links (also ein L mit 180 Grad drehen). Lassen Sie etwa die Hälfte der Texthöhe des freien Speicherplatzes über der horizontalen Linie im Bild liegen, so dass die Linie unter dem Text liegt.
- Legen Sie dieses Bild als Hintergrund für das innere div jedes Spaltencontainers fest und positionieren Sie es in der linken Mitte. Wiederholung = keine;
Einige Beispielcodes (ohne Bilder)
%Vor%Tags und Links php html-table binary-tree data-representation