javascript - 在不在右边的下面开始一个新行

Question

我在循环中的每行文本下方附加了两个 Canvas 。但是下一个内容始终从上一个记录的第二个 Canvas 的右侧开始。

我要这个

|text1                     |
|canvas1||canvas2|
|text2                     |

但是我得到了

|text1                     |
|canvas1||canvas2||text2   |

这是我的

https://jsfiddle.net/May_Y/2h6xz5c7/17/

draw("canv_0");
draw("canv2_0");
draw("canv_1");
draw("canv2_1");

function draw(idname) {
  var canvas = document.getElementById(idname);
  var ctx = canvas.getContext('2d');

  // complete custom shape
  ctx.beginPath();
  ctx.rect(20, 20, 150, 100);
  ctx.fillStyle = "red";
  ctx.fill();
}

<div class="result-box" id="result-box">The result is : <br><strong id="result"></strong></div>
<p overflow="hidden">

  <text id="result0">------------------------This is my Text1--------------------------------</text><br>

  <canvas id="canv_0" width="250" height="250" color="red" style="position: relative; float: left; display: block; height: 200px; width: 200px;"></canvas><br>
  <canvas id="canv2_0" width="250" height="250" style="position: relative; float: left; display: block; height: 200px; width: 200px;"></canvas><br>

  <text id="result1">------------------------This is my Text2----------------------</text><br>

  <canvas id="canv_1" width="250" height="250" color="red" style="position: relative; float: left; display: block; height: 200px; width: 200px;"></canvas><br>
  <canvas id="canv2_1" width="250" height="250" style="position: relative; float: left; display: block; height: 200px; width: 200px;"></canvas><br>
</p>

如何获得所需的布局？

Answer 1

您应该申请 clear: both;将 CSS 属性添加到 float 元素之后的第一个 block ，以防止它 float 。这是 <br style="clear: both;"> 的示例:

draw("canv_0");
draw("canv2_0");
draw("canv_1");
draw("canv2_1");

function draw(idname) {
  var canvas = document.getElementById(idname);
  var ctx = canvas.getContext('2d');

  // complete custom shape
  ctx.beginPath();
  ctx.rect(20, 20, 150, 100);
  ctx.fillStyle = "red";
  ctx.fill();
}

<div class="result-box" id="result-box">
  The result is :
</div>
<p id="result0">
  ------------------------This is my Text1--------------------------------
</p>
<canvas id="canv_0" width="250" height="250" color="red" style="position: relative; float: left; display: block; height: 200px; width: 200px;"></canvas>
<canvas id="canv2_0" width="250" height="250" style="position: relative; float: left; display: block; height: 200px; width: 200px;"></canvas>
<br style="clear: both;">

<p id="result1">
  ------------------------This is my Text2----------------------
</p>

<canvas id="canv_1" width="250" height="250" color="red" style="position: relative; float: left; display: block; height: 200px; width: 200px;"></canvas>
<canvas id="canv2_1" width="250" height="250" style="position: relative; float: left; display: block; height: 200px; width: 200px;"></canvas>

<br style="clear: both;">