タイムラインを動的に設定する方法がわかりません

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テリーさんから取られた）この例：
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; 
}