Question

我正在尝试实施水平时间轴，但遇到了困难。我需要帮助来实现它！

body {
  background-color: black;
}

.timeline {
  white-space: nowrap;
  overflow-x: hidden;
}

.timeline ol {
  font-size: 0;
  width: 100vw;
  padding: 250px 0;
  transition: all 1s;
}

.timeline ol li {
  position: relative;
  display: inline-block;
  list-style-type: none;
  width: 160px;
  height: 3px;
  background: #fff;
}

.timeline ol li:last-child {
  width: 280px;
}

.timeline ol li:not(:first-child) {
  margin-left: 14px;
}

.timeline ol li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(100% + 1px);
  bottom: 0;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #F45B69;
}

.timeline ol li div {
  position: absolute;
  left: calc(100% + 7px);
  width: 280px;
  padding: 15px;
  font-size: 1rem;
  white-space: normal;
  color: black;
  background: white;
}

.timeline ol li div::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
}

.timeline ol li:nth-child(odd) div {
  top: -16px;
  transform: translateY(-100%);
}

.timeline ol li:nth-child(odd) div::before {
  top: 100%;
  border-width: 8px 8px 0 0;
  border-color: white transparent transparent transparent;
}

.timeline ol li:nth-child(even) div {
  top: calc(100% + 16px);
}

.timeline ol li:nth-child(even) div::before {
  top: -8px;
  border-width: 8px 0 0 8px;
  border-color: transparent transparent transparent white;
}

<section class="timeline">
  <ol>
    <li>
      <div>
        <time>2015</time> CHIWEN B.V. established
      </div>
    </li>
    <li>
      <div>
        <time>2016</time> Established long-term research partnership with University of Groningen
      </div>
    </li>
    <li>
      <div>
        <time>2017</time> Research on machine learning, deep learning, distributed training, brain-inspired pattern recognition algorithms, Neo4J and Blockchain, and distributed computing
      </div>
    </li>
    <li>
      <div>
        <time>2018 Jan-Mar</time> Started TuDoLink project Team building Project Feasibility Analysis
      </div>
    </li>
    <li>
      <div>
        <time>2018 Apr-Jul</time> System Framework Design Social Interaction Optimize Partnerships Optimize Business Plan Seed Funding Prepare MVP Prepare Pre-ICO Active on Social Media
      </div>
    </li>
    <li>
      <div>
        <time>2018 Aug-Dec</time> MVP Development Collect Feedbacks of MVP Improve and Update MVP Optimize Team Development Optimize Business Development Release System Beta V1.0 System Testing Prepare ICO Prepare to List
      </div>
    </li>
    <li>
      <div>
        <time>2019 Jan-Jun</time> ICO List Tokens Release APP & Trading Platform V1.0 Works on most of CPUs, GPUs, VPUs Distribute Globally
      </div>
    </li>
  </ol>
</section>

Answer 1

使用具有2行的CSS网格，可以将时间轴的每个段定义为2列宽。立即将第二段设为3列宽，即可为您提供交错的布局。我建立了我的描述列表，但这是基本思想：

dl {
  display: grid;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  grid-template-rows: auto auto;
}
.cell {
  grid-column: span 2;
}
.cell:nth-child(2) {
  grid-column: span 3;
}

https://codepen.io/joemaffei/pen/WNQKyPo

Answer 2

您应该尝试使用Visjs.org。以下是一些您可以使用它的示例。 http://visjs.org/timeline_examples.html

例如，在docs页面上，以下是创建基本时间轴的方法：

<html>
<head>
  <title>Timeline | Basic demo</title>

  <style type="text/css">
    body, html {
      font-family: sans-serif;
    }
  </style>

  <script src="http://visjs.org/dist/vis.js"></script>
  <link href="ttp://visjs.org/dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="visualization"></div>

<script type="text/javascript">
  // DOM element where the Timeline will be attached
  var container = document.getElementById('visualization');

  // Create a DataSet (allows two way data-binding)
  var items = new vis.DataSet([
    {id: 1, content: 'item 1', start: '2013-04-20'},
    {id: 2, content: 'item 2', start: '2013-04-14'},
    {id: 3, content: 'item 3', start: '2013-04-18'},
    {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
    {id: 5, content: 'item 5', start: '2013-04-25'},
    {id: 6, content: 'item 6', start: '2013-04-27'}
  ]);

  // Configuration for the Timeline
  var options = {};

  // Create a Timeline
  var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

水平时间轴CSS实现

2 个答案: