如何在另一个画布旁边堆叠两个相同大小的画布？

Question

我一直在尝试将两个相同大小的画布放在另一个画布上。让我们看看，在下图中我想要2和3在同一个地方，旁边是1。

我尝试使用以下代码解决此问题：

＆＃13;

＆＃13;

#plotCanvas {
  background-color: #fff;
  position: relative;
  top: 0px;
  left: 0px;
}

#plotCanvas_BG {
  background-color: #fff;
  position: absolute;
  top: 329px;
  left: 352px;
  background-color: transparent;
}

＆＃13;

<div style="width: 810px; margin-left: auto; margin-right: auto;">
  <canvas width="350" height="350" id="imageCanvas" style="float: left; border: 1px solid black;"></canvas>
  <canvas width="350" height="350" id="plotCanvas" style="margin-left: 6px; border: 1px solid black;"></canvas>
  <canvas width="350" height="350" id="plotCanvas_BG" style="margin-left: 6px; border: 1px solid black;"></canvas>
</div>

＆＃13;

＆＃13;

＆＃13;

如您所见，我已手动设置画布3的位置（对应于＆＃34; plotCanvas_BG＆＃34;）。然而，缺点是画布3的位置根据网络浏览器的不同而不同，如果网页的大小发生变化，那么位置也会发生变化。

Answer 1

增加div的宽度

    <div style="width: 1150px; margin-left: auto; margin-right: auto;">
div canvas{
  display:inline-block;
}

http://codepen.io/nagasai/pen/XKprww

Answer 2

使用相对定位的容器div，它将包含绝对的canvas元素。

<div style="width: 810px; margin-left: auto; margin-right: auto;">
  <canvas width="350" height="350" id="imageCanvas" style="float: left; border: 1px solid black;"></canvas>
  <div class="container">
    <canvas width="350" height="350" id="plotCanvas" style="margin-left: 6px; border: 1px solid black;"></canvas>
    <canvas width="350" height="350" id="plotCanvas_BG" style="margin-left: 6px; border: 1px solid black;"></canvas>
  </div>
</div>

CSS

.container {
  display: inline-block;
  position: relative;
  float: left;
}

#plotCanvas,
#plotCanvas_BG {
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
}

#plotCanvas {
  background-color: #fff;
}

JSFiddle演示：https://jsfiddle.net/8c8csnzk/1/