如何浮動這些C3圖表和HandsOnTable元素而不影響功能？

Question

我有一個HandsOnTable表（有兩個用戶請求的附加內容）和一個C3圖表（需要填充水平空間），並且不能讓它們很好地彼此並排。

https://jsfiddle.net/horacebury/2vc606wx/13/

I /想/這兩個div應該是能夠浮動的，但是當我做他們要麼不（浮動）或停止C3圖表的提示或停止一些中間列從工作編輯：

<div> 
    <table class="tgh"><tr><td>Auxilliary Power</td></tr></table> 
    <div id="example"></div> 
    <table class="tg"> 
     <tr> 
     <td class="tg-yw4l" ng-repeat="item in items track by $index">{{item}}</td> 
     </tr> 
    </table> 
    </div> 
    <div id="c3chart"></div> 

Answer 1

不知道我是怎麼做到這一點，但我敢肯定這是一個bodge：

https://jsfiddle.net/horacebury/2vc606wx/15/

<div style="float: right;"> 
    <table class="tgh"> 
    <tr> 
     <td>Auxilliary Power</td> 
    </tr> 
    </table> 
    <div id="example"></div> 
    <table class="tg"> 
    <tr> 
     <td class="tg-yw4l" ng-repeat="item in items track by $index">{{item}}</td> 
    </tr> 
    </table> 
</div> 
<div id="c3chart" style="width: 65%;"></div>