How to display a binary search tree using CSS, HTML and a bit of Javascript?

Question

I want to \"paint\" the tree on screen using CSS and HTML and not represent it in any way or data structure ...

Answer 1

A very simple way of creating a tree-like structure with HTML and CSS is nesting

s
Each div represents a node, and can have multiple nodes inside:

 //root
    
 //child 1
        
 //child 1.1
            
 //child 1.1.1
            
 //child 1.1.2
            
 //child 1.1.3
        
        
 //child 1.2
    
    
 //child 2

Then you can add a margin-top to all divs, so that they appear under its parent div.

A JSFiddle: http://jsfiddle.net/VxRmc/

I've added percentage widths to each div. You can calculate widths if you know how many childs a node has. Or you can use fixed widths...

Yeah, it's not a beautiful tree, but it can't be simpler.

0 讨论(0)

查看其它2个回答

发布评论:

提交评论

---

•  加载中...