सीएसएस/HTML फ़्लोचार्ट

Question

मैं नीचे प्रारूप में एक बहुत ही सरल, सीधा सीएसएस/HTML प्रवाह संचित्र की जरूरत है:

Node1 
    | 
Node2 
    | 
Node3 
    | 
Node4 
    | 
Node5 
    | 
Node6 

मैं सीएसएस के बारे में कुछ भी नहीं करने के लिए अगले जानते हैं, लेकिन एक नीचे दिए गए लिंक में विस्तृत संशोधित करने का प्रयास किया। समस्या यह थी कि मैं केवल एक रैखिक, लंबवत चार्ट चाहता हूं और यह पूरे स्थान पर समाप्त हो गया!

http://www.htmlforums.com/css/t-flowchart-using-css-85999.html

किसी को भी मदद कर सकते हैं?

Answer 1

आशा यह आपके लिए काम करता है:

http://jsfiddle.net/wkCNm/

---

मामले जे एस फिडल गायब हो जाता है, यहाँ कोड है।

एचटीएमएल

<h1>A simple family tree using 32 divs</h1> 

<div id="container"> 

<div id="no1"><a href="#">Production Director</a></div> 
<div id="line1"></div> 
<div id="no1"><a href="#">Production Director</a></div> 
<div id="line1"></div> 
<div id="no1"><a href="#">Production Director</a></div> 
<div id="line1"></div> 
<div id="no1"><a href="#">Production Director</a></div> 

</div> 

सीएसएस

h1 { 
    width:580px; 
    font-family:verdana,arial,helvetica,sans-serif; 
    font-size:18px; 
    text-align:center; 
    margin:40px auto; 
} 
#container { 
    width:580px; 
    font-family:verdana,arial,helvetica,sans-serif; 
    font-size:11px; 
    text-align:center; 
    margin:auto; 
} 
#container a { 
    display:block; 
    color:#000; 
    text-decoration:none; 
    background-color:#f6f6ff; 
} 
#container a:hover { 
    color:#900; 
    background-color:#f6f6ff; 
} 
#no1 { 
    width:190px; 
    line-height:60px; 
    border:1px solid #000; 
    margin:auto; 
} 
#no1 a { 
    height:60px; 
} 
#line1 { 
    font-size:0; 
    width:1px; 
    height:20px; 
    color:#fff; 
    background-color:#000; 
    margin:auto; 
} 
#line2 { 
    font-size:0; 
    width:424px; 
    height:1px; 
    color:#fff; 
    background-color:#000; 
    margin:auto; 
} 
#line3 { 
    font-size:0; 
    display:inline; 
    width:1px; 
    height:20px; 
    color:#fff; 
    background-color:#000; 
    margin-left:78px; 
    float:left; 
} 
#line4,#line5,#line6 { 
    font-size:0; 
    display:inline; 
    width:1px; 
    height:20px; 
    color:#fff; 
    background-color:#000; 
    margin-left:140px; 
    float:left; 
} 
#no2 { 
    display:inline; 
    border:1px solid #000; 
    clear:both; 
    margin-left:35px; 
    float:left; 
} 
#no2 a,#no4 a,#no8 a { 
    width:84px; 
    height:50px; 
    padding-top:8px; 
} 
#no3 { 
    display:inline; 
    border:1px solid #000; 
    margin-left:58px; 
    float:left; 
} 
#no3 a,#no5 a,#no6 a,#no7 a,#no9 a { 
    width:84px; 
    height:42px; 
    padding-top:16px; 
} 
#no4 { 
    display:inline; 
    border:1px solid #000; 
    margin-left:53px; 
    float:left; 
} 
#no5 { 
    display:inline; 
    border:1px solid #000; 
    margin-left:55px; 
    float:left; 
} 
#line7,#line13 { 
    font-size:0; 
    display:inline; 
    width:1px; 
    height:38px; 
    color:#fff; 
    background-color:#000; 
    margin-left:219px; 
    float:left; 
} 
#line8,#line14 { 
    font-size:0; 
    display:inline; 
    width:1px; 
    height:38px; 
    color:#fff; 
    background-color:#000; 
    margin-left:281px; 
    float:left; 
} 
#no6,#no8 { 
    display:inline; 
    border:1px solid #000; 
    margin-left:107px; 
    float:left; 
} 
#line9,#line11,#line15,#line17 { 
    font-size:0; 
    display:inline; 
    width:26px; 
    height:1px; 
    color:#fff; 
    background-color:#000; 
    margin-top:29px; 
    float:left; 
} 
#line10,#line12,#line16,#line18 { 
    font-size:0; 
    display:inline; 
    width:1px; 
    height:60px; 
    color:#fff; 
    background-color:#000; 
    float:left; 
} 
#line16,#line18 { 
    height:30px; 
} 
#no7,#no9 { 
    display:inline; 
    border:1px solid #000; 
    margin-left:169px; 
    float:left; 
} 
.clear { 
    clear:both; 
}