组织机构树
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组织结构树</title>
<style>
/* 默认机构树（垂直方向） */
.tree-org {
display: table;
}
.tree-org::before,
.tree-org::after {
content: "";
display: table
}
.tree-org::after {
clear: both
}
.tree-org-node,
.tree-org-node__children {
position: relative;
margin: 0;
padding: 0;
list-style-type: none
}
.tree-org-node::before,
.tree-org-node::after,
.tree-org-node__children::before,
.tree-org-node__children::after {
transition: all .35s
}
.tree-org-node {
padding-top: 20px;
display: table-cell;
vertical-align: top
}
.tree-org-node.is-leaf {
padding-left: 10px;
padding-right: 10px
}
.tree-org-node::before,
.tree-org-node::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 19px
}
.tree-org-node::after {
left: 50%;
border-left: 1px solid #ddd
}
.tree-org-node:not(:first-child)::before,
.tree-org-node:not(:last-child)::after {
border-top: 1px solid #ddd
}
.tree-org-node__content {
position: relative;
display: inline-block;
-webkit-user-select: none;
user-select: none
}
.tree-org-node__content .tree-org-node__inner {
padding: 5px 8px;
text-align: center;
border-radius: 2px;
border: 1px solid #ddd;
}
.tree-org-node__content .tree-org-node__text {
padding: 10px 15px
}
.tree-org>.tree-org-node {
display: flex !important;
flex-direction: column;
align-items: center;
padding-top: 0
}
.tree-org>.tree-org-node::after {
border-left: 0
}
.tree-org-node__children {
display: table;
padding-top: 20px;
width: 100%
}
.tree-org-node__children::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 20px;
border-left: 1px solid #ddd
}
.tree-org-node__children::after {
content: "";
display: table;
clear: both
}
/* 水平机构树 */
.horizontal>.tree-org-node {
flex-direction: row
}
.horizontal .tree-org-node {
display: table-cell;
float: none;
padding-top: 0;
padding-left: 20px
}
.horizontal .tree-org-node.is-leaf {
padding-top: 10px;
padding-bottom: 10px
}
.horizontal .tree-org-node::before,
.horizontal .tree-org-node::after {
width: 19px;
height: 50%
}
.horizontal .tree-org-node::after {
top: 50%;
left: 0;
border-left: 0
}
.horizontal .tree-org-node:only-child::before {
top: 1px;
border-bottom: 1px solid #ddd
}
.horizontal .tree-org-node:not(:first-child)::before,
.horizontal .tree-org-node:not(:last-child)::after {
border-top: 0;
border-left: 1px solid #ddd
}
.horizontal .tree-org-node:not(:only-child)::after {
border-top: 1px solid #ddd
}
.horizontal .tree-org-node .tree-org-node-inner {
display: table
}
.horizontal .tree-org-node__content {
display: table-cell;
vertical-align: middle;
padding: 5px 0
}
.horizontal>.tree-org-node:only-child::before {
border-bottom: 0
}
.horizontal .tree-org-node__children {
display: table-cell;
vertical-align: middle;
padding-top: 0;
padding-left: 20px
}
.horizontal .tree-org-node__children::before {
top: 50%;
left: 0;
width: 20px;
height: 0;
border-left: 0;
border-top: 1px solid #ddd
}
.horizontal .tree-org-node__children::after {
display: none
}
.horizontal .tree-org-node__children>.tree-org-node {
display: flex;
align-items: center;
}
/* 水平机构树（反方向） */
.horizontal.reverse .tree-org-node::before,
.horizontal.reverse .tree-org-node::after {
left: auto;
right: 0;
}
.horizontal.reverse>.tree-org-node {
flex-direction: row-reverse;
}
.horizontal.reverse .tree-org-node {
padding-left: 0;
padding-right: 20px;
}
.horizontal.reverse .tree-org-node::after {
left: auto;
right: 0;
border-left: 1px;
border-right: 0;
}
.horizontal.reverse .tree-org-node:not(:first-child)::before,
.horizontal.reverse .tree-org-node:not(:last-child)::after {
/* border-top: 0;
border-left: 1px solid #ddd */
border-left: 0;
border-right: 1px solid #ddd
}
.horizontal.reverse .tree-org-node__children {
padding-left: 0;
padding-right: 20px
}
.horizontal.reverse .tree-org-node__children::before {
left: auto;
right: 0;
border-left: 1px;
border-right: 0;
}
.horizontal.reverse .tree-org-node__children>.tree-org-node {
flex-direction: row-reverse;
}
</style>
</head>
<body>
<h3>垂直机构树</h3>
<div class="tree-org ">
<div class="tree-org-node">
<div class="tree-org-node__content">
<div class="tree-org-node__inner" style="color: rgb(255, 255, 255); background: rgb(16, 143, 254);">
<div class="tree-org-node__text">新旧约全书</div>
</div>
</div>
<div class="tree-org-node__children">
<div class="tree-org-node">
<div class="tree-org-node__content">
<div class="tree-org-node__inner">
<div class="tree-org-node__text">旧约</div>
</div>
</div>
<div class="tree-org-node__children">
<div class="tree-org-node is-leaf">
<div class="tree-org-node__content">
<div class="tree-org-node__inner">
<div class="tree-org-node__text">摩西五经</div>
</div>
</div>
</div>
<div class="tree-org-node is-leaf">
<div class="tree-org-node__content">
<div class="tree-org-node__inner">
<div class="tree-org-node__text">旧约历史书</div>
</div>
</div>
</div>
<div class="tree-org-node is-leaf">
<div class="tree-org-node__content">
<div class="tree-org-node__inner">
<div class="tree-org-node__text">诗歌智慧书</div>
</div>
</div>
</div>
<div class="tree-org-node is-leaf">
<div class="tree-org-node__content">
<div class="tree-org-node__inner">
<div class="tree-org-node__text">大先知书</div>
</div>
</div>
</div>
<div class="tree-org-node is-leaf">
<div class="tree-org-node__content">
<div class="tree-org-node__inner">
<div class="tree-org-node__text">小先知书</div>
</div>
</div>
</div>
</div>
</div>
<div class="tree-org-node">
<div class="tree-org-node__content">
<div class="tree-org-node__inner">
<div class="tree-org-node__text">新约</div>
</div>
</div>
<div class="tree-org-node__children">
<div class="tree-org-node is-leaf">
<div class="tree-org-node__content">
<div class="tree-org-node__inner">
<div class="tree-org-node__text">四福音书</div>
</div>
</div>
</div>
<div class="tree-org-node is-leaf">
<div class="tree-org-node__content">
<div class="tree-org-node__inner">
<div class="tree-org-node__text">教会历史书</div>
</div>
</div>
</div>
<div class="tree-org-node is-leaf">
<div class="tree-org-node__content">
<div class="tree-org-node__inner">
<div class="tree-org-node__text">保罗书信</div>
</div>
</div>
</div>
<div class="tree-org-node is-leaf">
<div class="tree-org-node__content">
<div class="tree-org-node__inner">
<div class="tree-org-node__text">普通书信</div>
</div>
</div>
</div>
<div class="tree-org-node is-leaf">
<div class="tree-org-node__content">
<div class="tree-org-node__inner">
<div class="tree-org-node__text">启示文学</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<div style="display: flex;">
<div style="flex: 1;">
<h3>水平机构树</h3>
<div class="tree-org horizontal">
<div class="tree-org-node">
<div class="tree-org-node__content">
<div class="tree-org-node__inner" style="color: rgb(255, 255, 255); background: rgb(16, 143, 254);">
<div class="tree-org-node__text">新旧约全书</div>
</div>
</div>
<div class="tree-org-node__children">
<div class="tree-org-node">
<div class="tree-org-node__content">
<div class="tree-org-node__inner">
<div class="tree-org-node__text">旧约</div>
</div>
</div>
<div class="tree-org-node__children">
<div class="tree-org-node is-leaf">
<div class="tree-org-node__content">
<div class="tree-org-node__inner">
<div class="tree-org-node__text">摩西五经</div>
</div>
</div>
</div>
<div class="tree-org-node is-leaf">
<div class="tree-org-node__content">
<div class="tree-org-node__inner">
<div class="tree-org-node__text">旧约历史书</div>
</div>
</div>
</div>
<div class="tree-org-node is-leaf">
<div class="tree-org-node__content">
<div class="tree-org-node__inner">
<div class="tree-org-node__text">诗歌智慧书</div>
</div>
</div>
</div>
<div class="tree-org-node is-leaf">
<div class="tree-org-node__content">
<div class="tree-org-node__inner">
<div class="tree-org-node__text">大先知书</div>
</div>
</div>
</div>
<div class="tree-org-node is-leaf">
<div class="tree-org-node__content">
<div class="tree-org-node__inner">
<div class="tree-org-node__text">小先知书</div>
</div>
</div>
</div>
</div>
</div>
<div class="tree-org-node">
<div class="tree-org-node__content">
<div class="tree-org-node__inner">
<div class="tree-org-node__text">新约</div>
</div>
</div>
<div class="tree-org-node__children">
<div class="tree-org-node is-leaf">
<div class="tree-org-node__content">
<div class="tree-org-node__inner">
<div class="tree-org-node__text">四福音书</div>
</div>
</div>
</div>
<div class="tree-org-node is-leaf">
<div class="tree-org-node__content">
<div class="tree-org-node__inner">
<div class="tree-org-node__text">教会历史书</div>
</div>
</div>
</div>
<div class="tree-org-node is-leaf">
<div class="tree-org-node__content">
<div class="tree-org-node__inner">
<div class="tree-org-node__text">保罗书信</div>
</div>
</div>
</div>
<div class="tree-org-node is-leaf">
<div class="tree-org-node__content">
<div class="tree-org-node__inner">
<div class="tree-org-node__text">普通书信</div>
</div>
</div>
</div>
<div class="tree-org-node is-leaf">
<div class="tree-org-node__content">
<div class="tree-org-node__inner">
<div class="tree-org-node__text">启示文学</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="flex: 1;">
<h3>水平机构数（反向）</h3>
<div class="tree-org horizontal reverse">
<div class="tree-org-node">
<div class="tree-org-node__content">
<div class="tree-org-node__inner" style="color: rgb(255, 255, 255); background: rgb(16, 143, 254);">
<div class="tree-org-node__text">新旧约全书</div>
</div>
</div>
<div class="tree-org-node__children">
<div class="tree-org-node">
<div class="tree-org-node__content">
<div class="tree-org-node__inner">
<div class="tree-org-node__text">旧约</div>
</div>
</div>
<div class="tree-org-node__children">
<div class="tree-org-node is-leaf">
<div class="tree-org-node__content">
<div class="tree-org-node__inner">
<div class="tree-org-node__text">摩西五经</div>
</div>
</div>
</div>
<div class="tree-org-node is-leaf">
<div class="tree-org-node__content">
<div class="tree-org-node__inner">
<div class="tree-org-node__text">旧约历史书</div>
</div>
</div>
</div>
<div class="tree-org-node is-leaf">
<div class="tree-org-node__content">
<div class="tree-org-node__inner">
<div class="tree-org-node__text">诗歌智慧书</div>
</div>
</div>
</div>
<div class="tree-org-node is-leaf">
<div class="tree-org-node__content">
<div class="tree-org-node__inner">
<div class="tree-org-node__text">大先知书</div>
</div>
</div>
</div>
<div class="tree-org-node is-leaf">
<div class="tree-org-node__content">
<div class="tree-org-node__inner">
<div class="tree-org-node__text">小先知书</div>
</div>
</div>
</div>
</div>
</div>
<div class="tree-org-node">
<div class="tree-org-node__content">
<div class="tree-org-node__inner">
<div class="tree-org-node__text">新约</div>
</div>
</div>
<div class="tree-org-node__children">
<div class="tree-org-node is-leaf">
<div class="tree-org-node__content">
<div class="tree-org-node__inner">
<div class="tree-org-node__text">四福音书</div>
</div>
</div>
</div>
<div class="tree-org-node is-leaf">
<div class="tree-org-node__content">
<div class="tree-org-node__inner">
<div class="tree-org-node__text">教会历史书</div>
</div>
</div>
</div>
<div class="tree-org-node is-leaf">
<div class="tree-org-node__content">
<div class="tree-org-node__inner">
<div class="tree-org-node__text">保罗书信</div>
</div>
</div>
</div>
<div class="tree-org-node is-leaf">
<div class="tree-org-node__content">
<div class="tree-org-node__inner">
<div class="tree-org-node__text">普通书信</div>
</div>
</div>
</div>
<div class="tree-org-node is-leaf">
<div class="tree-org-node__content">
<div class="tree-org-node__inner">
<div class="tree-org-node__text">启示文学</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
