Home >Web Front-end >HTML Tutorial >The rookie begged the master to change the existing vertically expanded tree into a horizontally expanded tree_html/css_WEB-ITnose
The rookie begged the master to change the existing vertically expanded tree into a horizontally expanded tree_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:02:431859browse
代码：
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a7部门组织架构图6e916e0f7d1e588d4f442bf645aedb2f
0f3eabac747cdf61a51589c5584ae6e8
46d5fe1c7617e3914f214aaf043f4ccf
body {
font: 12px/ 1.8 "宋体";
position: relative;
}
html,body {
height: 100%;
overflow-y: hidden;
margin: 0;
padding: 0;
overflow: auto;
}
.strt-wrap {
width: 20000px;
margin: 2px auto;
}
.strt-part {
text-align: center;
float: left;
position: relative;
}
.strt-part .line-v {
position: relative;
height: 40px;
width: 100%;
}
.strt-part .line-v span {
display: block;
background: #ccc;
position: absolute;
top: 0;
font-size: 0;
line-height: 1px;
width: 1px;
height: 40px;
left: 50%;
}
.strt-name {
display: inline-block;
padding: 0 5px;
height: 24px;
line-height: 24px;
border: 1px solid #ccc;
margin: 0 10px;
border-radius: 3px;
background: #f8f8f8;
}
.strt-part .line-h {
height: 1px;
display: block;
background: #ccc;
position: absolute;
top: 0;
font-size: 0;
}
.strt-part .line-h-l {
width: 50%;
left: 0;
}
.strt-part .line-h-c {
width: 100%;
left: 0;
}
.strt-part .line-h-r {
width: 50%;
right: 0;
}
.strt-block {
float: inherit;
}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
5dc7c47d96ec81b988c532996e4abcd7
5cde8b1b8aa425a633694555d1c0d713
bfd07a7e7ee1517c299d2d585a0b84a3
75b8e5fa61d43f088d7a99d0a0f8e594
a41a36c113906a22ab83b7feb4d7c0d5天云平台54bdf357c58b8a65c66d7c19c8e4d114
da0b7dc5af7a6f5e5b5685999ccf91ff45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d11416b28748ea4df4d9c2150843fecfba68
bfd07a7e7ee1517c299d2d585a0b84a3
75b8e5fa61d43f088d7a99d0a0f8e594
caadcd8d22f77b2f13191bd92d7d218e54bdf357c58b8a65c66d7c19c8e4d114
da0b7dc5af7a6f5e5b5685999ccf91ff45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d11416b28748ea4df4d9c2150843fecfba68
12c8130151b0e9dade61b1178411745e档案类54bdf357c58b8a65c66d7c19c8e4d114
da0b7dc5af7a6f5e5b5685999ccf91ff45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d11416b28748ea4df4d9c2150843fecfba68
bfd07a7e7ee1517c299d2d585a0b84a3
75b8e5fa61d43f088d7a99d0a0f8e594
caadcd8d22f77b2f13191bd92d7d218e54bdf357c58b8a65c66d7c19c8e4d114
da0b7dc5af7a6f5e5b5685999ccf91ff45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d11416b28748ea4df4d9c2150843fecfba68
12c8130151b0e9dade61b1178411745e档案54bdf357c58b8a65c66d7c19c8e4d114
16b28748ea4df4d9c2150843fecfba68
75b8e5fa61d43f088d7a99d0a0f8e594
aca60eb96f779a2607ae6cee4314888a54bdf357c58b8a65c66d7c19c8e4d114
da0b7dc5af7a6f5e5b5685999ccf91ff45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d11416b28748ea4df4d9c2150843fecfba68
12c8130151b0e9dade61b1178411745e档案54bdf357c58b8a65c66d7c19c8e4d114
16b28748ea4df4d9c2150843fecfba68
75b8e5fa61d43f088d7a99d0a0f8e594
aca60eb96f779a2607ae6cee4314888a54bdf357c58b8a65c66d7c19c8e4d114
da0b7dc5af7a6f5e5b5685999ccf91ff45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d11416b28748ea4df4d9c2150843fecfba68
12c8130151b0e9dade61b1178411745e档案54bdf357c58b8a65c66d7c19c8e4d114
16b28748ea4df4d9c2150843fecfba68
75b8e5fa61d43f088d7a99d0a0f8e594
d94dcfba62d5172d8e9eba00dd632fd554bdf357c58b8a65c66d7c19c8e4d114
da0b7dc5af7a6f5e5b5685999ccf91ff45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d11416b28748ea4df4d9c2150843fecfba68
12c8130151b0e9dade61b1178411745e档案54bdf357c58b8a65c66d7c19c8e4d114
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
75b8e5fa61d43f088d7a99d0a0f8e594
aca60eb96f779a2607ae6cee4314888a54bdf357c58b8a65c66d7c19c8e4d114
da0b7dc5af7a6f5e5b5685999ccf91ff45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d11416b28748ea4df4d9c2150843fecfba68
79726edbca05f50565f1052c2dbff21f搜索类54bdf357c58b8a65c66d7c19c8e4d114
da0b7dc5af7a6f5e5b5685999ccf91ff45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d11416b28748ea4df4d9c2150843fecfba68
bfd07a7e7ee1517c299d2d585a0b84a3
75b8e5fa61d43f088d7a99d0a0f8e594
caadcd8d22f77b2f13191bd92d7d218e54bdf357c58b8a65c66d7c19c8e4d114
da0b7dc5af7a6f5e5b5685999ccf91ff45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d11416b28748ea4df4d9c2150843fecfba68
79726edbca05f50565f1052c2dbff21f搜索54bdf357c58b8a65c66d7c19c8e4d114
16b28748ea4df4d9c2150843fecfba68
75b8e5fa61d43f088d7a99d0a0f8e594
aca60eb96f779a2607ae6cee4314888a54bdf357c58b8a65c66d7c19c8e4d114
da0b7dc5af7a6f5e5b5685999ccf91ff45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d11416b28748ea4df4d9c2150843fecfba68
79726edbca05f50565f1052c2dbff21f搜索54bdf357c58b8a65c66d7c19c8e4d114
16b28748ea4df4d9c2150843fecfba68
75b8e5fa61d43f088d7a99d0a0f8e594
aca60eb96f779a2607ae6cee4314888a54bdf357c58b8a65c66d7c19c8e4d114
da0b7dc5af7a6f5e5b5685999ccf91ff45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d11416b28748ea4df4d9c2150843fecfba68
79726edbca05f50565f1052c2dbff21f搜索54bdf357c58b8a65c66d7c19c8e4d114
16b28748ea4df4d9c2150843fecfba68
75b8e5fa61d43f088d7a99d0a0f8e594
d94dcfba62d5172d8e9eba00dd632fd554bdf357c58b8a65c66d7c19c8e4d114
da0b7dc5af7a6f5e5b5685999ccf91ff45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d11416b28748ea4df4d9c2150843fecfba68
79726edbca05f50565f1052c2dbff21f搜索54bdf357c58b8a65c66d7c19c8e4d114
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
75b8e5fa61d43f088d7a99d0a0f8e594
d94dcfba62d5172d8e9eba00dd632fd554bdf357c58b8a65c66d7c19c8e4d114
da0b7dc5af7a6f5e5b5685999ccf91ff45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d11416b28748ea4df4d9c2150843fecfba68
79726edbca05f50565f1052c2dbff21f分析类54bdf357c58b8a65c66d7c19c8e4d114
da0b7dc5af7a6f5e5b5685999ccf91ff45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d11416b28748ea4df4d9c2150843fecfba68
bfd07a7e7ee1517c299d2d585a0b84a3
75b8e5fa61d43f088d7a99d0a0f8e594
caadcd8d22f77b2f13191bd92d7d218e54bdf357c58b8a65c66d7c19c8e4d114
da0b7dc5af7a6f5e5b5685999ccf91ff45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d11416b28748ea4df4d9c2150843fecfba68
79726edbca05f50565f1052c2dbff21f分析54bdf357c58b8a65c66d7c19c8e4d114
16b28748ea4df4d9c2150843fecfba68
75b8e5fa61d43f088d7a99d0a0f8e594
aca60eb96f779a2607ae6cee4314888a54bdf357c58b8a65c66d7c19c8e4d114
da0b7dc5af7a6f5e5b5685999ccf91ff45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d11416b28748ea4df4d9c2150843fecfba68
3d701bdebb71e27b883477ea1a3836a9分析54bdf357c58b8a65c66d7c19c8e4d114
16b28748ea4df4d9c2150843fecfba68
ab4e6273d84ebde9b7f119226e9d19ba
df9523afcdecb4f77e71f59a84347ce954bdf357c58b8a65c66d7c19c8e4d114
7e4cd2d134541ccb96b5e2c1207e315745a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d11416b28748ea4df4d9c2150843fecfba68
3d701bdebb71e27b883477ea1a3836a9分析54bdf357c58b8a65c66d7c19c8e4d114
16b28748ea4df4d9c2150843fecfba68
ab4e6273d84ebde9b7f119226e9d19ba
285682b4715e144f4fbd7188262382f754bdf357c58b8a65c66d7c19c8e4d114
7e4cd2d134541ccb96b5e2c1207e315745a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d11416b28748ea4df4d9c2150843fecfba68
3d701bdebb71e27b883477ea1a3836a9分析54bdf357c58b8a65c66d7c19c8e4d114
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
上面是从网上找的纵向树，但是不符合项目要求，所以想改成横向向右展开的树，求大神帮忙修改一下，不甚感激，谢谢~~~急~~
组织架构图类似：
回复讨论(解决方案)
我也需要，谢谢，做网站
弄了个你可以看看，通过json数据生成。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>无标题页</title> <style type="text/css"> .htree{ margin:0; padding:0; font-size:14px; } .leaf { border: solid 1px red; height:23px; line-height:23px; margin: 3px 0; padding:0 3px; position:relative; display:inline-block; *display:inline; zoom:1; } .parent { margin: 4px 0 4px 1px; position:relative; } .node{ width:14px; word-break:break-all; border:solid 1px blue; padding:15px 10px; } .hline{ height:1px; width:23px; background:#ccc; font-size:0; overflow:hidden; position:absolute; top:50%; } .hline_r{ left:36px; } .hline_l{ left:-23px; } .vline{ width:1px; background:#ccc; position:absolute; font-size:0; overflow:hidden; left:-23px; } .vline_t{ height:50%; top:50%; } .vline_diff{ height:8px; bottom:-8px; } .vline_m{ height:100%; top:0; } .vline_b{ height:50%; top:0; } </style> <script type="text/javascript"> function createTree(obj, lev, pidx, plen, htmlArr) { var childs = obj.childs ? obj.childs : []; htmlArr.push("<div class=\"parent\">"); if (lev == 1) { htmlArr.push("<div class=\"hline hline_r\"></div>"); } else { htmlArr.push("<div class=\"hline hline_l\"></div>"); if (childs.length > 0) htmlArr.push("<div class=\"hline hline_r\"></div>"); if (pidx == 0 && plen != 1) htmlArr.push("<div class=\"vline vline_t\"></div>"); if (pidx != 0 && pidx != plen - 1) htmlArr.push("<div class=\"vline vline_m\"></div>"); if (pidx != plen - 1) htmlArr.push("<div class=\"vline vline_diff\"></div>"); if (pidx == plen - 1 && pidx != 0) htmlArr.push("<div class=\"vline vline_b\"></div>"); } htmlArr.push("<table cellpadding=\"0\" cellspacing=\"0\">"); htmlArr.push(" <tr>"); htmlArr.push(" <td style=\"width:80px;\">"); htmlArr.push(" <div class=\"node\">" + obj.name + "</div>"); htmlArr.push(" </td>"); if (childs.length > 0) { htmlArr.push(" <td>"); var len = childs.length; for (var i = 0; i < len; i++) { var tempObj = childs[i]; if (tempObj.leaf !== true) { createTree(tempObj, lev + 1, i, len, htmlArr) } else { htmlArr.push(" <div>"); htmlArr.push(" <div class=\"leaf\">"); htmlArr.push(" <div class=\"hline hline_l\" " + (i == 0 && len == 1 ? "style=\"*margin-top:-1px;\"" : "") + "></div>"); /*ie7 hack*/ if (i == 0 && len != 1) htmlArr.push(" <div class=\"vline vline_t\"></div>"); if (i != 0 && i != len - 1) htmlArr.push(" <div class=\"vline vline_m\"></div>"); if (i != len - 1) htmlArr.push(" <div class=\"vline vline_diff\"></div>"); if (i == len - 1 && i != 0) htmlArr.push(" <div class=\"vline vline_b\"></div>"); htmlArr.push(" " + tempObj.name); htmlArr.push(" </div>"); htmlArr.push(" </div>"); } } htmlArr.push(" </td>"); } htmlArr.push(" </tr>"); htmlArr.push("</table>"); htmlArr.push("</div>"); } function create() { var obj = { name: "组织架构1", childs: [ { name: '员工1', leaf: true }, { name: '员工2', leaf: true }, { name: '组织架构2', childs: [ { name: '员工3', leaf: true }, { name: '员工4', leaf: true }, { name: '组织架构4', childs: [ { name: '员工5', leaf: true }, { name: '员工6', leaf: true } ] } ] }, { name: '组织架构3', childs: [ { name: '组织架构5', childs: [ { name: '员工8', leaf: true } ] }, { name: '员工7', leaf: true } ] }, { name: '组织架构33' } ] }; var htmlArr = []; createTree(obj, 1, 0, 0, htmlArr); document.getElementById("div_test").innerHTML = htmlArr.join(""); } </script></head><body>不支持ie6<br /><input type="button" value="生成" onclick="create();"/><div id="div_test" style="border:solid 1px red;"></div></body></html> 无聊做了一下，具体查看博客 html模拟组织架构横向展开
3楼的哥哥
我看了你的代码，如果我这颗是动态生成的，你的这个节点好像不能自动居中，怎么破？
我想要的样式
我想要的样式
你现在要的只有第一个节点文字是纵向排列的？ 这个图和你发帖时候的图弄起来结构可是不同的。
我想要的样式
你现在要的只有第一个节点文字是纵向排列的？ 这个图和你发帖时候的图弄起来结构可是不同的。
是的，只有第一个节点文字是纵向排列的
我想要的样式
你现在要的只有第一个节点文字是纵向排列的？ 这个图和你发帖时候的图弄起来结构可是不同的。
是的，只有第一个节点文字是纵向排列的
你要不就先用我原来的竖排吧，你这个效果的暂时没写出来。