如何创建垂直时间轴

Question

我需要这样的东西：

你可以看到一个专业是正确的，下一个是在左边，等等。岁月也是如此。

我写了这个HTML＆amp; CSS代码：

.full div {
  display: inline-block;
  width: 130px;
  height: 50px;
}

.full div:nth-child(odd) {
  float: left;
}

<div class="row">
  <div class="full">
    <div class="d1">university 1</div>
    <div class="d2">year 1</div><br>
    <div class="d1">university 2</div>
    <div class="d2">year 2</div><br>
    <div class="d1">university 3</div>
    <div class="d2">year 3</div><br>
    <div class="d1">university 4</div>
    <div class="d2">year 4</div><br>
  </div>
</div>

乍一看是的，它正如我预期的那样正常，但事实并非如此。

问题是：

1. 我无法在中心对齐我的所作所为。

2. div越小越小，而不是并排。

3. 如果我使用像col-xs-6这样的课程，那除了我之外不能正常工作。

JSFiddle

只需调整窗口大小以了解我在说什么。

Answer 1

检查一下：希望它接近你所需要的。

https://jsfiddle.net/zke68ao2/1/

.full{
  display: inline-block;
}
.full div{
      display: inline-block;
      width: 130px;
      height: 50px;
      text-align:center;
  }

  .full div:nth-child(odd):not(br){
      float: left;
  }
  .full div:nth-child(even):not(br){
      float: right;
  }