如何水平设置高图和表格？

Question

这就是我的高图看起来像atm

我希望图表在右侧，而表格在左侧

这是我的HTML：

<div id="words" style="width:70%;float:left;">
<table border="1" class="highchart" data-graph-container-before="1" data-graph-type="column">
    <thead>
        <tr>
            <th>Word</th>
            <th>Count</th>
        </tr>
    </thead>
    <tbody>

                <tr>
                    <td>icon</td>
                    <td>12</td>
                </tr>
                <tr>
                    <td>text</td>
                    <td>12</td>
                </tr>
                <tr>
                    <td>your</td>
                    <td>9</td>
                </tr>
                <tr>
                    <td>post</td>
                    <td>6</td>
                </tr>
                <tr>
                    <td>document</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>with</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>parentNode</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>email</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>com&quot;</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>googletag</td>
                    <td>3</td>
                </tr>
    </tbody>
</table>

我该怎么做才能实现这样的输出？

Answer 1

如果您可以更改HTML，那么只需将表放在Highcharts容器之前并设置适当的样式（float，width）。例如，您还可以使用两个div：http://jsfiddle.net/68qdew8g/

<div style="float: left; width: 30%;">
  <table border="1" class="highchart" data-graph-container-before="1" data-graph-type="column">
      ...
  </table>
</div>
<div id="words" style="width:70%;float:left;"></div>