垂直タイムラインCodyHouse、私は自分のアプリケーションで垂直タイムラインを使用する必要がある、と私はこれを見つける側（ない代替）

Question

を選択します。

https://codyhouse.co/gem/vertical-timeline/

問題はカードが交互にあり、私がしたいということですシーケンスのサイドカードを選択します。次のカードを強制的に右または左に表示するには、CSSクラスで選択する必要があります。

私が変更しなければならないクラスは、.cd-timeline-block：nth-​​child（even） ですが、私はどのように変更する必要があるのか​​分かりません！

誰かが私を助けることができますか？前もって感謝します。

Answer 1

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

https://jsfiddle.net/8yo1c2ze/