CSS（或Bootstrap）的水平时间轴

Question

如何创建水平时间轴？通过示例，我创建了自己的垂直时间轴，但我无法将其转换为水平时间轴。

<style>
.container {
    background:none;
    width:80%;
    margin:0 auto;
    overflow:auto;
    padding:2%;
}
.right-content, .left-content {
    float:left;
    display:block;
    width:40%;
    padding:1% 2%;
}
.left-content {
    border-right:10px dotted #666;   
    text-align:right;
}
.left-content p {
    margin:150px 0 0;
}
.right-content p {
    margin:80px 0 150px;
}
.container p {
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7 ease-in-out;
-ms-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;   
}
.left-content .more-padding {
  padding-right:100px;
}
.right-content .more-padding {
  padding-left:100px;
}
</style>
    <div class="container">
               <div class="left-content">
                  <p>Content 01</p>
                  <p>Content 02</p>
                  <p>Content 03</p>
                  <p>Content 04</p>
                  <p>Content 05</p>
               </div>
               <div class="right-content">
                  <p>Content 01</p>
                  <p>Content 02</p>
                  <p>Content 03</p>
                  <p>Content 04</p>
                  <p>Content 05</p>
               </div>
            </div>

这是我正在寻找的一个示例图。 。

Answer 1

我会重构您的HTML，以便您的时间轴内容按顺序显示。目前，在您的垂直时间轴上，时间顺序（01,01,02,02，... 05,05）与您的DOM演示文稿不符（01,02，... 05,01,02，... 05 ）。对于水平时间轴，您应该在时间轴包装上使用absolute定位，并定位时间轴top的每个时间轴项bottom或div。此外，您应该使用<ul>和<li>来获得更好的语法。

如果您对更复杂的设计感兴趣，请继续并从现有解决方案中收集：

https://codyhouse.co/demo/horizontal-timeline/是一个不错的自定义选项。

https://timeline.knightlab.com/为您提供了充足的选择，非常灵活，可让您在Google表格中管理时间轴内容。