twitter-bootstrap 带有 CSS（或 Bootstrap）的水平时间轴
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42093418/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Horizontal Timeline with CSS (or Bootstrap)
提问by esilik
How can I create horizontal timeline? Going through example, I created my own vertical timeline but I couldn't transform it to horizontal timeline.
如何创建水平时间线？通过示例，我创建了自己的垂直时间线，但无法将其转换为水平时间线。
<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>
This is an example drawing of what I'm looking for. 
.
这是我正在寻找的示例图。.
采纳答案by Josh Palmeri
I would refactor your HTML so that your timeline content shows in order. Currently, on your vertical timeline, the chronological order (01, 01, 02, 02, ... 05, 05) does not match your DOM presentation (01, 02, ... 05, 01, 02, ... 05). For a horizontal timeline you should use absolutepositioning along your timeline wrapper and position each timeline item topor bottomof the timeline div. Also, you should use <ul>and <li>for better syntax.
我会重构您的 HTML，以便您的时间线内容按顺序显示。目前，在您的垂直时间线上，时间顺序 (01, 01, 02, 02, ... 05, 05) 与您的 DOM 表示 (01, 02, ... 05, 01, 02, ... 05) 不匹配）。对于水平时间线，您应该使用absolute沿时间线包装器的定位并定位每个时间线项目top或bottom时间线div。此外，您应该使用<ul>and<li>以获得更好的语法。
If you are interested in a more complex design, go ahead and glean from an existing solution:
如果您对更复杂的设计感兴趣，请继续并从现有解决方案中收集：
https://codyhouse.co/demo/horizontal-timeline/is a nice custom option.
https://codyhouse.co/demo/horizontal-timeline/是一个不错的自定义选项。
https://timeline.knightlab.com/gives you plenty of options, is quite flexible and allows you to manage your timeline content in a Google Sheet.
https://timeline.knightlab.com/为您提供了很多选择，非常灵活，并允许您在 Google 表格中管理时间线内容。
