2つの同じサイズのキャンバスを別のキャンバスの隣に重ねてスタックするにはどうすればよいですか？

Question

私はお互いの上に、そして別のキャンバスの隣に2つの同じサイズのキャンバスを得ようとしていました。

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

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

<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>

：私は、私は次のコードでこの問題を解決しようとした次の1

に、同じ場所に2と3をしたい、次の図に、見ることができます

ご覧のとおり、キャンバス3（「plotCanvas_BG」に対応）の位置を手動で設定しました。しかし、ウェブブラウザによってキャンバス3の位置が異なり、ウェブページのサイズが変化すると位置も変化するという欠点がある。 DIVの

Answer 1

絶対配置キャンバス要素を含むであろうに対して位置決めされた容器のDIVを使用。

<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/

Answer 2

増加幅

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

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