我很难弄清楚如何动态设置时间线

Question

我试着像这样设置我的时间轴，问题是包装内容，因为高度总是不同的。愿意使用 div 格式，任何代码或说明都会有所帮助。

图片有一个固定高度的图像，这很难，但我可以只使用圆圈，并以某种方式根据内容高度绘制一条垂直线。我用 margin top 将它向上移动，但它看起来不太好。如您所见，文本不会随之移动。

这是截图

这是我尝试执行的代码。

<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 垂直对齐日期，然后根据哪一侧左右浮动文本。我如何建立它来包装内容并让时间轴根据动态添加的内容显示不同的高度大小。

Answer 1

也许您可以使用 "display: flex"（又名 Flexbox）来实现您的需要，并在不弄乱其他框的情况下增加这些框。

查看此示例（取自 Eisneim Terry 的）：
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;
}

我很难弄清楚如何动态设置时间线

I am having a hard time figuring out how to dynamically setup a timeline

html

javascript

css

jquery