Wie kann ich zwei gleich große Canvas übereinander neben einer anderen Leinwand stapeln?

Question

Ich habe versucht, zwei gleich große Canvas übereinander und neben einer anderen Leinwand zu bekommen. Lets, in der Figur siehe unten I 2 und 3 an der gleichen Stelle möchten, neben 1.

Ich habe versucht, dieses Problem mit dem folgenden Code zu lösen:

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

Wie Sie sehen können, habe ich die Position des Canvas 3 (was "plotCanvas_BG" entspricht) manuell gesetzt. Der Nachteil ist jedoch, dass die Position der Leinwand 3 abhängig vom Webbrowser unterschiedlich ist und sich die Position ändert, wenn sich die Größe der Webseite ändert.

Answer 1

Gebrauch ein Behälter, der div relativ positioniert ist, dass die Leinwand Elemente positioniert absolute enthält.

<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 Demo: https://jsfiddle.net/8c8csnzk/1/

Answer 2

Erhöhen Breite von div

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

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