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指出的那样。这是个人偏好的问题：我倾向于喜欢花车;有些人，内联块。有关使用哪些内容的详细信息，您可以查看此帖子：float:left; vs display:inline; vs display:inline-block; vs display:table-cell;。

Answer 2

尝试：

display: inline-block;

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

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

2 个答案: