【发布时间】：2018-11-13 01:21:25
【问题描述】：
这是我想要创建的所需时间线https://codepen.io/paulhbarker/pen/apvGdv。
让我解释一下我的方法。我正在创建一个“ul”，并且每个时间线都在该无序列表的“li”内，类名为“card”。这里，“li”设置为相对位置，“card”设置为绝对位置。然后我选择每个奇数“li”并将“card”转换为左侧，如果“li”为偶数，我将“card”转换为右侧。直到这里它正在按我的预期工作。
我在 li 中使用 ":after" 伪选择器并在 "bottom:0" 位置添加一个圆形针点。我正在向 li 添加一定的宽度、bg 颜色和填充以创建一条线。问题是我希望我的卡出现在“li”的“：after”伪选择器的“bottom：0”的圆形针点位置。但这些卡片超出了精确度。
HTML：
<section id="timeline">
<ul>
<li>
<div class="card">
<div class="card-heading color--blue">
<div class="card-number">
<span>01</span>
</div>
<div class="heading-description">
<h2><span class="small">SUBTITLE</span> <br />TECHNOLOGY</h2>
</div>
</div>
<div class="card-body">
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.
</p>
<img src="http://placehold.it/1000x500" alt="Graphic">
</div>
</div>
</li>
<li>
<div class="card">
<div class="card-heading color--blue">
<div class="card-number">
<span>01</span>
</div>
<div class="heading-description">
<h2><span class="small">SUBTITLE</span> <br />TECHNOLOGY</h2>
</div>
</div>
<div class="card-body">
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.
</p>
<img src="http://placehold.it/1000x500" alt="Graphic">
</div>
</div>
</li>
<li>
<div class="card">
<div class="card-heading color--blue">
<div class="card-number">
<span>01</span>
</div>
<div class="heading-description">
<h2><span class="small">SUBTITLE</span> <br />TECHNOLOGY</h2>
</div>
</div>
<div class="card-body">
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.
</p>
<img src="http://placehold.it/1000x500" alt="Graphic">
</div>
</div>
</li>
<li>
<div class="card">
<div class="card-heading color--blue">
<div class="card-number">
<span>01</span>
</div>
<div class="heading-description">
<h2><span class="small">SUBTITLE</span> <br />TECHNOLOGY</h2>
</div>
</div>
<div class="card-body">
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.
</p>
<img src="http://placehold.it/1000x500" alt="Graphic">
</div>
</div>
</li>
<li>
<div class="card">
<div class="card-heading color--blue">
<div class="card-number">
<span>01</span>
</div>
<div class="heading-description">
<h2><span class="small">SUBTITLE</span> <br />TECHNOLOGY</h2>
</div>
</div>
<div class="card-body">
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.
</p>
<img src="http://placehold.it/1000x500" alt="Graphic">
</div>
</div>
</li>
</ul>
</section>
CSS：
#timeline{
margin-top:300px;
}
body{
background-color: rgb(223, 219, 219);
}
#timeline ul li{
list-style: none;
position: relative;
width: 6px;
/* padding-top: different for even and off */
margin: 0 auto;
background: #fff;
}
#timeline ul li:after{
content:'';
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
bottom:0;
background: inherit;
transform: translateX(-40%);
}
.card img{
width: 100%;
}
.card{
position: absolute;
width:370px;
height:380px;
bottom:0;
background-color: #FFFFFF;
box-sizing: border-box;
font-family: "Roboto";
}
.card .card-heading{
box-sizing: border-box;
width:100%;
height:80px;
padding:15px 0px 15px 20px;
display: flex;
position: relative;
}
.card .card-heading .card-number{
background-color: #3A99C2;
box-sizing: border-box;
width:55px;
height:50px;
color:white;
font-size:35px;
font-weight: bold;
padding:5px 0px 0px 10px;
}
/* Timeline setting for odd element */
#timeline li:nth-child(odd) .card{
transform: translateX(-120%);
}
#timeline li:nth-child(odd){
padding-top: 400px;
}
#timeline li:first-child{
padding-top: 100px;
}
#timeline li:nth-child(odd) .card .card-heading:before{
content:'';
position: absolute;
right:-3%;
top:34%;
border-left:14px solid transparent;
border-left-color:inherit;
border-top:14px solid transparent;
border-bottom:14px solid transparent;
}
/* Timeline even */
#timeline li:nth-child(even) .card .card-heading:before{
content:'';
position: absolute;
left:-3%;
top:34%;
border-right:14px solid transparent;
border-right-color:inherit;
border-top:14px solid transparent;
border-bottom:14px solid transparent;
}
#timeline li:nth-child(even) .card{
transform: translateX(20%);
}
#timeline li:nth-child(even){
padding-top: 100px;
}
.card .card-heading .heading-description{
color:white;
display: inline;
letter-spacing: 2px;
margin: -20px 0px 0px 10px;
line-height: 1.5rem;
}
.card .card-body{
padding:0px 15px 15px 15px;
}
.card .small{
font-size:17px;
font-weight: normal;
}
.color--blue{
background-color: #46B8E9;
border-color:#46B8E9;
}
【问题讨论】：