Question

我正在绘制2个cirlces并在这两个圆圈之间插入一个img。我想将所有这些对齐在一条水平线上。所有这些都在span4宽度的div内。

这是我的代码。

<div id = "divid" span4>

JS代码

var circle_style = "<div style = 'float:left'><canvas id='myCanvas' ></canvas></div><div style = 'float:left'><img src = 'img'></div><div style = 'float:left'><canvas id='myCanvas1'></canvas></div"


$("#divid").append(circle_style);

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 75;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();


var canvas2 = document.getElementById('myCanvas1');
var context2 = canvas2.getContext('2d');
var centerX2= canvas2.width / 2;
var centerY2 = canvas2.height / 2;
var radius2 = 75;

context2.beginPath();
context2.arc(centerX2, centerY2, radius2, 0, 2 * Math.PI, false);
context2.fillStyle = 'green';
context2.fill();

另外，如何在圈子中插入文字？

Answer 1

您正在使用内联样式。这是一个非常糟糕的做法。

您尚未将src提供给镜头。

试试这个：

JS：

var circle_style = "<div class='left vmiddle'><canvas id='myCanvas' ></canvas></div><div class='left vmiddle'><img src = 'img'></div><div class='left vmiddle'><canvas id='myCanvas1'></canvas></div>";

CSS：

img{height:50px;width:50px;background:#ccc;}
.vmiddle{vertical-align:middle;}
.left{display:inline-block;}
#divid{min-width:650px;}

Demo here.

Output here.

如何以水平格式对齐div？

1 个答案: