jquery - 如何创建垂直时间轴

Question

我需要这样的东西:

如您所见，其中一个专业在右边，下一个在左边，依此类推。年份也是如此。

我写了这段 HTML 和 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;
  }