html - 如何创建简单的水平时间轴

Question

我不能用 HTML + CSS 制作这些:

我尝试了一切...使用 :before，with: after，但我真的做不到。

我做了一个 JsFiddle 演示。

Demo

我该怎么做？你有想法吗？

其他问题:这个也能响应？ (我认为不是...:()

代码(CSS):

    .container {
  width:1025px;
  display:block;
  height:400px;
}
.container:before{
  content:'';
  width:1025px;
  height:15px;
  background-color:blue;
  display:block;
  position:absolute;
  top:20%;
}

.container div{
  display:inline-block;
  float:left;
  background-size: 22px 22px;
  padding-left:22px;

}

.container div.span:before{
  content:'';
   background:url('http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/firey-orange-jelly-icons-alphanumeric/070242-firey-orange-jelly-icon-alphanumeric-information3-sc49.png');
  background-repeat:no-repeat;
  background-position:left;
  display:block;
  width:22px;
  height:22px;
      background-size: contain;
}

.container div.down:after{
  content:'';
   background:url('http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/firey-orange-jelly-icons-alphanumeric/070242-firey-orange-jelly-icon-alphanumeric-information3-sc49.png');
  background-repeat:no-repeat;
  background-position:left;
  display:block;
  width:22px;
  height:22px;
      background-size: contain;
}

代码(HTML):

<div class="container">
  <div class="span">Lorem ipsum</div>
  <div class="down">Dolor sit amet</div>
  <div class="span">Lorem ipsum</div>
  <div class="down">Lorem ipsum dolor sit amet</div>
  <div class="span">Lorem ipsum</div>
  <div class="down">Lorem</div>
  <div class="span">Lorem ipsum dolor</div>
  <div class="down">Lorem</div>
  <div class="span">Lorem ipsum dolor</div>
  <div class="down">Lorem ipsum</div>
  <div class="span">Lorem ipsum dolor</div>
  <div class="down">Lorem ipsum</div>
</div>

Answer 1

具体细节的描述需要一段时间，所以我将对一个方法做一个简短的演示，这似乎与您所追求的一致。

代码 ID 效率很低(目前没有响应)，但我希望基础知识足以让您一路走来。

.timeline {
  height: 250px;
  margin: 1em;
  line-height: 250px;
  position: relative;
  text-align: center;
}
.timeline:before {
  content: '';
  position: absolute;
  width: 80%;
  top: 50%;
  left: 10%;
  height: 26px;
  margin-top: -13px;
  background: red;
}
.event {
  width: 50px;
  height: 50px;
  position: relative;
  margin: 0 50px;
  display: inline-block;
  background: blue;
  vertical-align: middle;
  border-radius: 50%;
}
.detail {
  position: absolute;
  line-height: 1em;
  white-space: nowrap;
  left: 100%;
}
.event:before {
  content: '';
  position: absolute;
  left: 50%;
  margin-left: -3px;
  width: 6px;
  background: green;
  height: 50px;
}
.event.up:before {
  top: -100%;
}
.event.down:before {
  top: 100%;
}
.up .detail {
  top: -50px;
}
.down .detail {
  bottom: -50px;
}

<div class="timeline">
  <div class="event up">
    <div class="detail">Lorem ipsum dolor.</div>
  </div>
  <div class="event down">
    <div class="detail">lorem</div>
  </div>
  <div class="event up">
    <div class="detail">Lorem ipsum dolor sit amet</div>
  </div>
</div>