如何使用CSS，HTML和一些Javascript来显示二叉搜索树？ [英] How to display a binary search tree using CSS, HTML and a bit of Javascript?

问题描述

我想使用CSS和HTML绘制屏幕上的树，而不是以任何方式或数据结构来表示...

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

推荐答案

使用HTML和CSS创建树状结构的非常简单方式是嵌套< div> s

每个 div 代表一个节点，内部可以有多个节点：

A very simple way of creating a tree-like structure with HTML and CSS is nesting <div>s
Each div represents a node, and can have multiple nodes inside:

<div> //root
    <div> //child 1
        <div> //child 1.1
            <div></div> //child 1.1.1
            <div></div> //child 1.1.2
            <div></div> //child 1.1.3
        </div>
        <div></div> //child 1.2
    </div>
    <div></div> //child 2
</div>

然后您可以添加 margin-top

一个JSFiddle： http://jsfiddle.net/VxRmc/

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

我已经为每个div添加了百分比宽度。如果你知道一个节点有多少子节点，你可以计算宽度。或者你可以使用固定宽度...

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.

这篇关于如何使用CSS，HTML和一些Javascript来显示二叉搜索树？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！