纯HTML+CSS打造组织架构图

    前段时间公司总监要我用HTML+CSS做一个部门组织架构图，问我能否实现的了？一开始以为很简单，就随口答应了。当着手做的时候才发现是多么的棘手。最后还是咬着牙做出来了。

    上图就是最后实现的效果，唯一的瑕疵就是父级与它的子级不能居中对齐。于是使用js来辅助父级与它的子级对齐，不过依然还是存在一些瑕疵（不过相对之前是要好一些），如图：

    HTML代码结构也应该也算清晰，只要找到<div class="strt-block">...</div>和<div class="strt-part">...</div>这两个DIV就大致明白HTML结构；

    CSS中，只要注意的是 .line-h-l 、.line-h-c 、.line-h-r 对应的线条。

具体效果请下载附件查看，附件中的实例也添加了拖拽效果。

    下载附件