初学者跪求大神把现有的纵向展开树修改成横向展开树
菜鸟跪求大神把现有的纵向展开树修改成横向展开树
代码:
<html>
<head>
<title>部门组织架构图</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
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;
}
</style>
</head>
<body style="overflow:hidden;">
<div class="strt-wrap" id="strtWrap">
<div class="strt-block">
<div class="strt-part">
<span class="strt-name" style="background: #6D6D6D;color: white;">天云平台</span>
<div class="line-v"><span></span></div>
<div class="strt-block">
<div class="strt-part">
<span class="line-h line-h-r"></span>
<div class="line-v"><span></span></div>
<span class="strt-name" style="background: #DBA659;color: white;">档案类</span>
<div class="line-v"><span></span></div>
<div class="strt-block">
<div class="strt-part">
<span class="line-h line-h-r"></span>
<div class="line-v"><span></span></div>
<span class="strt-name" style="background: #DBA659;color: white;">档案</span>
</div>
<div class="strt-part">
<span class="line-h line-h-c"></span>
<div class="line-v"><span></span></div>
<span class="strt-name" style="background: #DBA659;color: white;">档案</span>
</div>
<div class="strt-part">
<span class="line-h line-h-c"></span>
<div class="line-v"><span></span></div>
<span class="strt-name" style="background: #DBA659;color: white;">档案</span>
</div>
<div class="strt-part">
<span class="line-h line-h-l"></span>
<div class="line-v"><span></span></div>
<span class="strt-name" style="background: #DBA659;color: white;">档案</span>
</div>
</div>
</div>
<div class="strt-part">
<span class="line-h line-h-c"></span>
<div class="line-v"><span></span></div>
<span class="strt-name" style="background: #679BCC;color: white;">搜索类</span>
<div class="line-v"><span></span></div>
<div class="strt-block">
<div class="strt-part">
<span class="line-h line-h-r"></span>
<div class="line-v"><span></span></div>
<span class="strt-name" style="background: #679BCC;color: white;">搜索</span>
</div>
<div class="strt-part">
<span class="line-h line-h-c"></span>
<div class="line-v"><span></span></div>
<span class="strt-name" style="background: #679BCC;color: white;">搜索</span>
</div>
<div class="strt-part">
<span class="line-h line-h-c"></span>
<div class="line-v"><span></span></div>
<span class="strt-name" style="background: #679BCC;color: white;">搜索</span>
</div>
<div class="strt-part">
<span class="line-h line-h-l"></span>
<div class="line-v"><span></span></div>
代码:
<html>
<head>
<title>部门组织架构图</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
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;
}
</style>
</head>
<body style="overflow:hidden;">
<div class="strt-wrap" id="strtWrap">
<div class="strt-block">
<div class="strt-part">
<span class="strt-name" style="background: #6D6D6D;color: white;">天云平台</span>
<div class="line-v"><span></span></div>
<div class="strt-block">
<div class="strt-part">
<span class="line-h line-h-r"></span>
<div class="line-v"><span></span></div>
<span class="strt-name" style="background: #DBA659;color: white;">档案类</span>
<div class="line-v"><span></span></div>
<div class="strt-block">
<div class="strt-part">
<span class="line-h line-h-r"></span>
<div class="line-v"><span></span></div>
<span class="strt-name" style="background: #DBA659;color: white;">档案</span>
</div>
<div class="strt-part">
<span class="line-h line-h-c"></span>
<div class="line-v"><span></span></div>
<span class="strt-name" style="background: #DBA659;color: white;">档案</span>
</div>
<div class="strt-part">
<span class="line-h line-h-c"></span>
<div class="line-v"><span></span></div>
<span class="strt-name" style="background: #DBA659;color: white;">档案</span>
</div>
<div class="strt-part">
<span class="line-h line-h-l"></span>
<div class="line-v"><span></span></div>
<span class="strt-name" style="background: #DBA659;color: white;">档案</span>
</div>
</div>
</div>
<div class="strt-part">
<span class="line-h line-h-c"></span>
<div class="line-v"><span></span></div>
<span class="strt-name" style="background: #679BCC;color: white;">搜索类</span>
<div class="line-v"><span></span></div>
<div class="strt-block">
<div class="strt-part">
<span class="line-h line-h-r"></span>
<div class="line-v"><span></span></div>
<span class="strt-name" style="background: #679BCC;color: white;">搜索</span>
</div>
<div class="strt-part">
<span class="line-h line-h-c"></span>
<div class="line-v"><span></span></div>
<span class="strt-name" style="background: #679BCC;color: white;">搜索</span>
</div>
<div class="strt-part">
<span class="line-h line-h-c"></span>
<div class="line-v"><span></span></div>
<span class="strt-name" style="background: #679BCC;color: white;">搜索</span>
</div>
<div class="strt-part">
<span class="line-h line-h-l"></span>
<div class="line-v"><span></span></div>