Css nur vertikale Zeitleiste

Ich arbeite an einer vertikalen Zeitachse mit CSS, kann jemand helfen. der linke Teil wird verstopft. Der linke Teil des Zeigerkreises überlappt sich mit dem gegenüberliegenden. Der Versuch, es nur mit CSS zu machen. Gibt es ein Java-Skript, das wir hinzufügen können, damit es funktioniert?Css nur vertikale Zeitleiste

http://jsfiddle.net/cdtHx/

Code:

<!DOCTYPE HTML> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Untitled Document</title> 
    <style type='text/css'> 
.line { 
    width:930px; 
    margin:0 auto; 
} 
.line div { 
    width: 408px; 
    background-color:#ffffff; 
    border:solid 1px #B4BBCD; 
    min-height:35px; 
    text-align:justify; 
    word-wrap:break-word; 
    list-style:none; 
} 
.ci { 
    position:relative; 
    float:right; 
} 
.cl { 
    position: relative; 
    text-align:right; 
} 
.ci, .cl span { 
    padding:10px; 
} 
.line:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 50%; 
} 
.ci:before, .cl:after, .ci span:before, .cl span:after { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
.line:before { 
    width: 3px; 
    top: -20px; 
    bottom: -20px; 
    background:#000; 
} 
.ci:before { 
    width: 5px; 
    height: 5px; 
    border: 3px solid #CCC; 
    border-radius: 100px; 
    margin: 10px 0 0 -38px; 
    box-shadow: 0 1px 1px rgba(0,0,0,0.2), inset 0 1px 1px rgba(0,0,0,0.1); 
    background: #000; 
} 
.ci:hover:before { 
    background: #090; 
} 
.ci span:before { 
    top: 12px; 
    left: -6px; 
    width: 9px; 
    height: 9px; 
    border-width: 0 0 1px 1px; 
    border-style: solid; 
    border-color: #e5e5e5; 
    background: #fff; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
} 
/*gggggg*/ 
    .cl:after { 
    width: 5px; 
    height: 5px; 
    border: 3px solid #CCC; 
    border-radius: 100px; 
    margin: 10px 0 0 445px; 
    background: #000; 
} 
.cl:hover:after { 
    background: #090; 
} 
.cl span:after { 
    top: 12px; 
    left: 404px; 
    width: 9px; 
    height: 9px; 
    border-width: 1px 1px 0 0; 
    border-style: solid; 
    border-color: #e5e5e5; 
    background: #fff; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
} 
 
</style> 
    </head> 

    <body style="overflow:hidden;"> 
    <div class="line"> 
     <div class="ci"><span>one</span></div> 
     <div class="cl"><span>two</span></div> 
     <div class="ci"><span>one</span></div> 
     <div class="cl"><span>two</span></div> 
     <div class="ci"><span>one</span></div> 
     <div class="cl"><span>two</span></div> 
    </div> 
</body> 
</html>

Quelle

2012-10-26 Avin Varghese

umdefiniert .ci und .cl zu:

.ci { 
    position: relative; 
    float: right; 
    clear: right;/*added*/ 
} 

.cl { 
    position: relative; 
    /*text-align: right;*//*removed*/ 
    float: left;/*added*/ 
    clear: left;/*added*/ 
}

Changed line div und .cl span:after zu:

.line div { 
    width: 396px;/*changed from 408px*/ 
    background-color: #ffffff; 
    border: solid 1px #B4BBCD; 
    min-height: 35px; 
    text-align: justify; 
    word-wrap: break-word; 
    list-style: none; 
} 

.line:before { 
    width: 2px;/*changed from 3px*/ 
    top: -20px; 
    bottom: -20px; 
    background: #000; 
} 

.cl span:after { 
    top: 12px; 
    left: 392px;/*changed from 404px*/ 
    width: 9px; 
    height: 9px; 
    border-width: 1px 1px 0 0; 
    border-style: solid; 
    border-color: #e5e5e5; 
    background: #fff; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
}

Aktualisiert Geige: http://jsfiddle.net/cdtHx/1/

Ist das, was Sie suchen?

Quelle

2012-10-27 02:42:58 pete

Überprüfen Sie mein Beispiel auf Github https://gist.github.com/OzzyCzech/6240202

Es vertikale Zeitleiste Element sind auf zwei Seiten (links und rechts)

enter image description here

Quelle

2013-08-15 11:52:42 OzzyCzech

Es sieht gut aus, ich Ich habe gerade einen Stift erstellt: http://cdpn.io/xzKaB –

Große Antwort nach einer langen Zeit. @ozzyczech –

.wrapper{ 
 
    max-width: 200px; 
 
    border-right: 1px solid green; 
 
    padding-right: 10px; 
 
} 
 
.wrapper .element{ 
 
    position: relative; 
 
    width: 80%; 
 
    margin-top: -30px; 
 
    padding: 20px; 
 
    border: 1px solid blue; 
 
} 
 

 
.wrapper .element:before{ 
 
    position: absolute; 
 
    content:''; 
 
    width: 20px; 
 
    top: 10px; 
 
    right: -15px; 
 
    border-top: 1px solid red; 
 
} 
 
.wrapper .element:first-child{ 
 
    margin-top: 0; 
 
} 
 
.wrapper .element:nth-child(2n){ 
 
    margin-left: 110%; 
 
} 
 
.wrapper .element:nth-child(2n):before{ 
 
    right: auto; 
 
    left: -15px; 
 
}

<div class="wrapper"> 
 
    <div class="element">text text<p>text</p>texttext</div> 
 
    <div class="element">text text<p>text</p>texttext</div> 
 
    <div class="element">text text<p>text</p>texttext</div> 
 
    <div class="element">text text<p>text</p>texttext</div> 
 
    <div class="element">text text<p>text</p>texttext</div> 
 
    <div class="element">text text<p>text</p>texttext</div> 
 
</div>

Quelle

2017-11-28 16:53:39 Phil

Css nur vertikale Zeitleiste

Antwort

Verwandte Themen