2つのdivを中央に移動して1つを別のクローンにする

Question

2つのdivをページの中央に移動しようとしています。右のdivは左divのクローンです（左のdivの画像は右のdivにクローンされます）。左のdivを 'left：100px'を使って移動しようとすると、右に歪みが生じます。どのようにして2つの部門を中央に移すことができますか。親切にも、以下の私の大草のいくつかのラインを見てください。

var theRightSide= document.getElementById('rightside'); 
 
var leftimages= theLeftSide.cloneNode(true); 
 
leftimages.removeChild(leftimages.lastChild); 
 
theRightSide.appendChild(leftimages);

div {width: 600px; height: 600px} 
 
#leftside {position: absolute;border: 3px solid black; background-color: lightYellow} 
 
#rightside {position: absolute;left:600px;background-color: lightYellow}

<div id="leftside"></div> 
 
<div id="rightside"></div>

Answer 1

これは申し訳ありません。あなたがゲームを作るために多分あなたは

$(document).ready(function() { 
$("#leftside").clone().appendTo("#rightside"); 
$("#rightside").css({ 
    "margin-left": "80px" 
    }); 
    $("#leftside").fadeOut("slow").remove(fadeOut); 
}); 

    div { 
    width: 60px; 
    height: 60px 
    } 
    #leftside { 
    position: absolute; 
    border: 3px solid black; 
    background-color: lightYellow; 
    } 

<div id="leftside"> 
</div> 
<div id="rightside"></div> 

https://jsfiddle.net/tjbaezid/u5xxky1s/2/

将来的にはこのクローンを必要とするか、または他のいくつかのプロジェクト、あなたのゲームのすべてのベストを願っています。ハッピーコーディング

Answer 2

それはWORKS-方法を説明するためにdisplay: inline-block;

非常に簡単な例を使用してみてください

.outer-box { 
 
position: absolute; 
 
left: 17%; 
 
} 
 
.box { 
 
    display: inline-block; 
 
    width: 150px; 
 
    height: 75px; 
 
    margin: 10px; 
 
    border: 3px solid; 
 
}

<div class="outer-box"> 
 
<div class="box">Box 1</div> 
 
<div class="box">Box 2</div> 
 
</div>