如何使两个图表使用highchart显示在同一行并排使用div [英] How to make two charts using highchart show up in the same line side by side using div

问题描述

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

这是我想要的，但它显示在两行。

 < script src =http://code.highcharts.com/highcharts.js>< / script> 
< script src =http://code.highcharts.com/modules/exporting.js>< / script> 
< div> 
< div id =containerstyle =width：200px; height：200px; diplay：inline>< / div> 
< div id =container2style =width：200px; height：200px; display：inline>< / div> 
 
< / div>  
  
  http://jsfiddle.net/nCe36/  
解决方案
 / p> 
 
 
向左边输入 #container 和＃container2  float：
  #container，
＃container2 {
 float：left; 
} 
  
（演示）
 
 
 
或者给这两个容器一个类（例如container）和float该类离开：
  .container {
 float：left; 
} 
  
（演示）
 
 
 
 编辑： display：inline-block 也会工作，正如@ Nile所指出的。这是个人喜好的问题：我倾向于喜欢浮动;有些人，内联块。有关使用哪个更多的信息，你可能想检查这个帖子： float：left; vs display：inline; vs display：inline-block; vs display：table-cell; 。
 
I want to display two charts in the same line using div. Can you please help?

Here is the what I am trying but it shows up in 2 lines.
<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>
full code in http://jsfiddle.net/nCe36/
解决方案
Just float the containers left!

Either give both #container and #container2 a left float:
#container,
#container2 {
    float: left;
}
(Demo)

Or give both containers a class (say, "container") and float that class left:
.container {
    float: left;
}
(Demo)

Edit: display: inline-block will also work, as @Nile has pointed out. It's a matter of personal preference: I tend to prefer floats; some people, inline-blocks. For more information on which to use, you might want to check out this post: float:left; vs display:inline; vs display:inline-block; vs display:table-cell;.

                        
这篇关于如何使两个图表使用highchart显示在同一行并排使用div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！