我有下面的代码,其中两个饼图显示为自上而下。相反,我需要并排显示它们。
我尝试了以下方法,但我未能实现。
有人可以帮我知道我哪里做错了吗?
代码
<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>
答案 0 :(得分: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>
答案 1 :(得分:0)
这样的事情应该让你开始:
<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>