javascript 如何使用highchart使两个图表使用div并排显示在同一行中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16755121/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make two charts using highchart show up in the same line side by side using div
提问by user2421350
I want to display two charts in the same line using div. Can you please help?
我想使用 div 在同一行中显示两个图表。你能帮忙吗？
Here is the what I am trying but it shows up in 2 lines.
这是我正在尝试的内容，但它显示在 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>
full code in http://jsfiddle.net/nCe36/
回答by Derek Henderson
Just float the containers left!
只需将容器浮动即可！
Either give both #containerand #container2a left float:
要么给两个#container和#container2一个左浮动：
#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-blockwill 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;.
编辑：display: inline-block也可以工作，正如@Nile 指出的那样。这是个人喜好的问题：我更喜欢花车；有些人，内联块。有关使用哪个的更多信息，您可能需要查看这篇文章：float:left; vs 显示：内联；vs 显示：内联块；vs 显示：表格单元格；.
回答by Nile
Try:
尝试：
display: inline-block;
Modified example: http://jsfiddle.net/pzqLG/
修改示例：http: //jsfiddle.net/pzqLG/
