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

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/

http://jsfiddle.net/nCe36/中的完整代码

2 个解决方案

#1

Just float the containers left!

只需将容器漂浮起来！

Either give both #container and #container2 a 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-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;.

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

#2

Try:

尝试：

display: inline-block;

Modified example: http://jsfiddle.net/pzqLG/

修改示例：http：//jsfiddle.net/pzqLG/