用CSS自定义时间表，最后一个孩子用

Question

我不是CSS 3的专家，但是我试图破解我发现创建一个很酷的时间线的代码。我需要添加一个代码来结束时间线（本例中的第5步），而最后一行没有关闭。任何帮助，将不胜感激。见代码：

section#timeline { 
 
    width: 100%; 
 
    margin: 20px auto; 
 
    position: relative; 
 
} 
 

 
/* the LINE */ 
 
section#timeline:before { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 0; 
 
    width: 1px; 
 
    height: 100%; 
 
    background: #000; 
 
} 
 

 
/* each section */ 
 
section#timeline article { 
 
    width: 100%; 
 
    margin: 0 0 50px 0; 
 
    position: relative; 
 
} 
 

 
/* section clear divs */ 
 
section#timeline article:after { 
 
    content: ''; 
 
    display: block; 
 
    clear: both; 
 
} 
 

 
/* dots */ 
 
section#timeline article div.inner span.step { 
 
    display: block; 
 
    width: 60px; 
 
    height: 60px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50%; 
 
    margin: 0 0 0 -30px; 
 
    border-radius: 100%; 
 
    border: 7px solid #ffffff; 
 
    font-size: 1.7em; 
 
    background: #000; 
 
    color: #fff; 
 
    text-align: center; 
 
    padding: 0px; 
 
    line-height: 2em; 
 
} 
 

 

 
/* right column */ 
 
section#timeline article div.inner { 
 
    width: 45%; 
 
    float: left; 
 
    margin: 5px 0 0 0; 
 
    border-radius: 6px; 
 
} 
 

 
/* left column */ 
 
section#timeline article:nth-child(2n+2) div.inner { 
 
    float: right; 
 
}

<section id="timeline"> 
 
    <article> 
 
    <div class="inner"> 
 
     <span class="step">1</span> 
 
     <div style="text-align: right;"> 
 
     <h3>Title 1</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis rutrum nunc, eget dictum massa. Nam faucibus felis nec augue adipiscing, eget commodo libero mattis. Mauris id finibus ligula. Aenean orci diam, ornare ac nisi et, semper fermentum risus. Phasellus vestibulum nibh orci, non auctor justo tempus et. Vestibulum pretium nulla quis ligula sollicitudin, euismod consequat enim elementum.</p> 
 
     </div> 
 
    </div> 
 
    </article> 
 
    <article> 
 
    <div class="inner"> 
 
     <span class="step">2</span> 
 
     <h3>Title 2</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis rutrum nunc, eget dictum massa. Nam faucibus felis nec augue adipiscing, eget commodo libero mattis. Mauris id finibus ligula. Aenean orci diam, ornare ac nisi et, semper fermentum risus. Phasellus vestibulum nibh orci, non auctor justo tempus et. Vestibulum pretium nulla quis ligula sollicitudin, euismod consequat enim elementum.</p> 
 
    </div> 
 
    </article> 
 
    <article> 
 
    <div class="inner"> 
 
     <div style="text-align: right;"> 
 
     <span class="step">3</span> 
 
     <h3>Title 3</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis rutrum nunc, eget dictum massa. Nam faucibus felis nec augue adipiscing, eget commodo libero mattis. Mauris id finibus ligula. Aenean orci diam, ornare ac nisi et, semper fermentum risus. Phasellus vestibulum nibh orci, non auctor justo tempus et. Vestibulum pretium nulla quis ligula sollicitudin, euismod consequat enim elementum.</p> 
 
     </div> 
 
    </div> 
 
    </article> 
 
    <article> 
 
    <div class="inner"> 
 
     <span class="step">4</span> 
 
     <h3>Title 4</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis rutrum nunc, eget dictum massa. Nam faucibus felis nec augue adipiscing, eget commodo libero mattis. Mauris id finibus ligula. Aenean orci diam, ornare ac nisi et, semper fermentum risus. Phasellus vestibulum nibh orci, non auctor justo tempus et. Vestibulum pretium nulla quis ligula sollicitudin, euismod consequat enim elementum.</p> 
 
    </div> 
 
    </article> 
 
    <article> 
 
    <div class="inner"> 
 
     <div style="text-align: right;"> 
 
     <span class="step">5</span> 
 
     <h3>Title 5</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis rutrum nunc, eget dictum massa. Nam faucibus felis nec augue adipiscing, eget commodo libero mattis. Mauris id finibus ligula. Aenean orci diam, ornare ac nisi et, semper fermentum risus. Phasellus vestibulum nibh orci, non auctor justo tempus et. Vestibulum pretium nulla quis ligula sollicitudin, euismod consequat enim elementum.</p> 
 
     </div> 
 
    </div> 
 
    </article> 
 
</section>

Answer 1

简单，添加背景的最后一篇文章（第5步）。

section#timeline article:last-child { 
    background-color: white; 
} 

Answer 2

你可以试试这个：

section#timeline { 
    width: 100%; 
    margin: 20px auto; 
    position: relative; 
} 

/* the LINE */ 
section#timeline:before { 
    content: ''; 
    display: block; 
    position: absolute; 
    left: 50%; 
    top: 0; 
    width: 1px; 
    height: 82%; 
    background: #000; 
} 

/* each section */ 
section#timeline article { 
    width: 100%; 
    margin: 0 0 50px 0; 
    position: relative; 
} 

/* section clear divs */ 
section#timeline article:after { 
    content: ''; 
    display: block; 
    clear: both; 
} 

/* dots */ 
section#timeline article div.inner span.step { 
    display: block; 
    width: 60px; 
    height: 60px; 
    position: absolute; 
    top: 0; 
    left: 50%; 
    margin: 0 0 0 -30px; 
    border-radius: 100%; 
    border: 7px solid #ffffff; 
    font-size: 1.7em; 
    background: #000; 
    color: #fff; 
    text-align: center; 
    padding: 0px; 
    line-height: 2em; 
} 


/* right column */ 
section#timeline article div.inner { 
    width: 45%; 
    float: left; 
    margin: 5px 0 0 0; 
    border-radius: 6px; 
} 

/* left column */ 
section#timeline article:nth-child(2n+2) div.inner { 
    float: right; 
} 

DEMO FIDDLE