javascript - 如何以水平格式对齐 div？

Question

我正在画 2 个圆圈，并在这两个圆圈之间有一个 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;}

演示在这里。

在这里输出。