带CSS的水平时间线（或引导）

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

<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>

.集装箱{
背景：无；
宽度：80%；
保证金：0自动；
溢出：自动；
填充：2%；
}
.右内容，.左内容{
浮动：左；
显示：块；
宽度：40%；
填充：1%2%；
}
.左内容{
右边框：10px点#666；
文本对齐：右对齐；
}
.左内容{
利润率：150px0；
}
.正确内容p{
利润率：80像素0 150像素；
}
.货柜{
-webkit过渡：所有0.7都易于输入输出；
-moz转换：所有0.7易入易出；
-ms转换：所有0.7秒均易于输入输出；
-o型过渡：所有0.7秒均易于输入输出；
过渡：所有0.7秒都易于输入输出；
}
.左内容。更多填充{
右边填充：100px；
}
.正确的内容。更多的填充{
左侧填充：100px；
}
内容01

内容02

内容03

内容04

内容05

内容01

内容02

内容03

内容04

内容05

---

这是我要找的东西的一张示例图

我将重构您的HTML，以便您的时间线内容按顺序显示。当前，在垂直时间线上，时间顺序（01,01,02,02，…05,05）与DOM表示（01,02，…05,01,02，…05）不匹配。对于水平时间线，您应该使用

absolute

沿时间线包装器定位，并定位时间线

div

的每个时间线项目

top

或

bottom

。此外，为了获得更好的语法，您应该使用

和

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

这是一个很好的自定义选项

---

提供了大量选项，非常灵活，允许您在谷歌工作表中管理时间线内容。

由于每个

都是新行，因此您无法使用此标签构建水平时间线。