Question

我尝试设置我的时间轴，问题是包装内容，因为高度总是不同的。愿意使用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垂直对齐日期，然后根据哪一边左右浮动文本。如何建立此内容以包装内容，并使时间线显示不同的不同高度，具体取决于动态添加的内容。

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

我很难搞清楚如何动态设置时间轴

1 个答案: