初学者跪求大神把现有的纵向展开树修改成横向展开树

菜鸟跪求大神把现有的纵向展开树修改成横向展开树
代码:
<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>