我试图像这样设置时间轴，问题在于包装内容，因为高度总是不同的。愿意使用div格式，任何代码或指示都将有所帮助。
图片中的图像具有固定的高度，很难固定，但我可以只使用圆圈，并根据内容的高度以某种方式绘制一条垂直线。我将其移至顶部，但效果不佳。如您所见，文本不会随之移动。
这是屏幕截图
这是我尝试执行的代码。
<div id="container-tbs">
<div id="tb-columns">
<table id="tb-table">
<tr>
<td class="tb-left">
<table>
<tr class="tb-date-left tb-date"> <td> JUNE 1, 2016 </td></tr>
<tr class="tb-title-left tb-title"> <td> TITLE </td></tr>
<tr class="tb-text-left tb-text"> <td> DESCRIPTIONSSSSS</td> </tr>
<tr> <td> </td> </tr>
</table>
</td>
<td><img class="timeline-pic-left" src="public/i/img/entry-left.png"/> </td>
<td class="tb-right"></td>
</tr>
<tr>
<td class="tb-left"></td>
<td><img class="timeline-pic-right" src="public/i/img/entry-right.png"/> </td>
<td class="tb-right">
<table>
<tr class="tb-date-right tb-date"> <td> MAY 1, 2016 </td></tr>
<tr class="tb-title-right tb-title"> <td> TITLE </td></tr>
<tr class="tb-text-right tb-text"> <td> LONG DESCRIPTIONS HERE</td> </tr>
<tr> <td> <img class="tb-pic-right" src="public/i/img/android.png"/> </td> </tr>
</table>
</td>
</tr>
</table>
</div>
</div>
CSS：
/* tb TABLES */
#tb-columns {
margin: 0 auto;
height: auto;
width: auto;
max-width: 500px;
}
.tb-left {
vertical-align:top;
max-width: 250px;
height: auto;
}
.tb-right {
vertical-align:top;
max-width: 250px;
}
.tb-date-left {
float: right;
clear:right;
margin-right: 10px;
}
.tb-title-left {
float: right;
clear:right;
margin-right: 10px;
margin-top: 10px;
}
.tb-text-left {
float: right;
clear:right;
margin-right: 10px;
margin-top: 10px;
text-align: right;
}
/* RIGHT SIDE */
.tb-date-right {
float: left;
clear:left;
margin-left: 10px;
}
.tb-title-right {
float: left;
clear:left;
margin-left: 10px;
margin-top: 10px;
}
.tb-text-right {
float: left;
clear:left;
margin-left: 10px;
margin-top: 10px;
text-align: left;
}
/* END tb TABLES */
我使用css垂直对齐日期，然后根据哪一侧将文本左右浮动。如何建立此包装内容并根据动态添加的内容使时间轴显示不同的高度大小。
最佳答案
也许您可以使用“ display：flex”（又名Flexbox）来实现所需的功能，并在不弄乱其他框的情况下扩展这些框。
检查以下示例（摘自Eisneim Terry's）：
http://codepen.io/eisneim/pen/goHEr
的HTML
<h1>Flexbox Timeline</h1>
<ul>
<li>
<p>07/2015 - 07/2016</p>
<p>
Twitter
<span>
Responsibilities: SEO, SEA, E-Mail
</span>
</p>
</li>
<li>
<p>07/2014 - 07/2015</p>
<p>
Facebook
<span>
Responsibilities: HTML5/CSS3, LESS/SASS, jQuery, CanJS, JavaScript, Canvas, PHP, MySQL, Ruby, Python
</span>
</p>
</li>
<li>
<p>07/2013 - 07/2014</p>
<p>
Google
<span>
Responsibilities: HTML5/CSS3, LESS/SASS, jQuery, CanJS
</span>
</p>
</li>
<li>
<p>07/2012 - 07/2013</p>
<p>
Apple
<span>
Responsibilities: HTML5/CSS3, LESS/SASS
</span>
</p>
</li>
<li>
<p>07/2011 - 07/2012</p>
<p>
Microsoft
<span>
Responsibilities: HTML5/CSS3
</span>
</p>
</li>
</ul>
的CSS
* {
margin: 0;
padding: 0;
}
*, *:before, *:after {
box-sizing: border-box;
}
body {
font: 1em/1 'Open Sans', sans-serif;
color: #555;
background: #f5f5f5;
}
h1 {
margin: 0;
line-height: 80px;
font-size: 24px;
font-weight: 700;
text-align: center;
color: #fff;
background: #999;
}
ul {
width: 650px;
margin: 40px auto;
list-style: none;
}
li {
display: flex;
}
li:last-child {
border: 0;
}
li p {
display: block;
padding: 20px;
line-height: 1.4;
}
li p:nth-child(1) {
position: relative;
padding-right: 25px;
font-size: 14px;
line-height: 2.5;
color: #aaa;
}
li p:nth-child(1):after {
content: '';
position: absolute;
top: 28px;
right: -12px;
display: block;
width: 20px;
height: 20px;
border: 5px solid #999;
border-radius: 50%;
background: #fff;
}
li:first-child p:nth-child(1):after {
background: #cfc;
}
li p:nth-child(2) {
flex: 1;
font-size: 24px;
border-left: 5px solid #999;
}
li p span {
display: block;
margin: 5px 0 0;
font-size: 12px;
font-style: italic;
color: #aaa;
}
关于javascript - 我很难弄清楚如何动态设置时间轴，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36370029/