Css tylko pionowa linia czasu

Pracuję na osi czasu w pionie z css, może pomóc. lewa część jest zatłoczona. lewy okrąg wskaźnika jest pokryty przeciwległym. Próbowanie zrobić tylko za pomocą css. Czy istnieje skrypt java, który możemy dodać, aby działał.Css tylko pionowa linia czasu

http://jsfiddle.net/cdtHx/

Kod:

<!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>

Źródło

2012-10-26 Avin Varghese

Graczu .ci i .cl do:

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

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

Zmieniono line div i .cl span:after do:

.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); 
}

Updated skrzypce: http://jsfiddle.net/cdtHx/1/

Czy tego szukasz?

Źródło

2012-10-27 02:42:58 pete

Sprawdź mój przykład na Github https://gist.github.com/OzzyCzech/6240202

Jest elementem pionowej osi czasu są na dwóch stronach (lewy i prawy)

enter image description here

Źródło

2013-08-15 11:52:42 OzzyCzech

Wygląda świetnie, ja” Właśnie stworzyłem pióro: http://cdpn.io/xzKaB –

Świetna odpowiedź po długim czasie czas. @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>

Źródło

2017-11-28 16:53:39 Phil

Css tylko pionowa linia czasu

Odpowiedz

Powiązane problemy