javascript - 如何使用 highchart 使两个图表使用 div 并排显示在同一行中

Question

我想使用 div 在同一行中显示两个图表。你能帮忙吗？

这是我正在尝试的，但它显示为两行。

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
    <div>
        <div id="container" style="width: 200px; height: 200px; diplay:inline"></div>
        <div id="container2" style="width: 200px; height: 200px; display:inline"></div>

    </div>

完整代码在http://jsfiddle.net/nCe36/

Answer 1

只需将容器向左浮动即可!

要么给 #container 和 #container2 一个左浮动:

#container,
#container2 {
    float: left;
}

( Demo )

或者给两个容器一个类(比如，“容器”)，然后将该类向左浮动:

.container {
    float: left;
}

( Demo )

编辑: display: inline-block 也将起作用，正如@Nile 指出的那样。这是个人喜好问题:我倾向于喜欢花车；有些人，内联 block 。有关使用哪个的更多信息，您可能需要查看这篇文章:float:left; vs display:inline; vs display:inline-block; vs display:table-cell; .