如何使用高清图制作两个图表使用div并排显示在同一行中

Question

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

这是我正在尝试但它显示在2行.

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

(演示)

或者给两个容器一个类(比如说"容器")并浮动那个类:

.container {
    float: left;
}

(演示)

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