Question

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

我尝试了以下方法，但我未能实现。

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

代码

<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>

Answer 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>

Answer 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>

并排保留两个饼图

2 个答案: