并排放置两个饼图答案

【问题标题】：Keep two Pie Charts Side by Side并排放置两个饼图
【发布时间】：2018-01-03 04:33:33
【问题描述】：

我有以下代码，其中两个饼图自上而下显示。相反，我需要并排展示它们。

我尝试了下面的方法，但我没有做到。

有人可以帮我知道我哪里做错了吗？

代码

<div id="contain">  
    <div id="canvas-holder" style="width:50%" class="col-xs-6">
        <canvas id="chart-area" width="400" height="450"  style="display: block; float:left;margin-left:2em">
        <!--<canvas id="chart-area-km" width="400" height="450" style="display: block; float:right;margin-left:2em">-->
    </canvas></div>
    <!-- <div style="width: 50%">
        <canvas id="canvas" height="450" width="600"></canvas>
    </div>-->
    <div id="canvas-holder-keymsg" style="width:50%" class="col-xs-6">
        <canvas id="chart-area-km" width="400" height="450" style="display: block; float:right;margin-left:2em">
    </canvas></div>

    </div>

【问题讨论】：

你试过 CSS 浮点数吗？一个向左浮动，一个向右浮动，也许？
你能为此制作一个小提琴吗？
是的，我试过浮动不工作。你能帮忙吗？
样式中有花车
尝试将浮动添加到画布周围的 div 中。

标签： html canvas chart.js pie-chart

【解决方案1】：

我已输入代码jsfiddle。正确使用画布支架的浮动

 <div id="contain">
 <div id="canvas-holder" style="background-color:#ff3400;width:50%;float: right;" \
 class="col-xs-6">
 <canvas id="chart-area" width="400" height="450" \
 style=" float:left;margin-left:2em"></canvas></div>
 <div id="canvas-holder" style="background-color:#000;width:50%;float: right;" \
 class="col-xs-6">
 <canvas id="chart-area-km" width="400" height="450" \
 style="float:left;margin-left:2em"></canvas></div>
 </div>

【讨论】：

【解决方案2】：

这样的事情应该可以帮助您入门：

<div id="contain">  
    <div id="canvas-holder" style="float:left;">
        <canvas id="chart-area" width="400" height="450" style="background-color:#ff3400;">
    </canvas></div>
    <div id="canvas-holder-keymsg" style="float:right;">
        <canvas id="chart-area-km" width="400" height="450" style="background-color:#289182;">
    </canvas></div>
</div>

【讨论】：