javascript - 附加的 div 没有放置正确的位置

Question

http://jsfiddle.net/epbuw2sm/2/

这是我的代码

<div id="container" style="position:relative;margin-top:50px;margin-left:50px;width:200px;height:300px;border: 2px solid red;">
      <div id="container1" style="position:relative;margin-top:30px;margin-left:30px;width:50px;height:50px;border: 2px solid #a1a1a1;">           
      </div>
    <div id="container2" style="position:relative;margin-top:30px;margin-left:30px;width:50px;height:50px;border: 2px solid green;">
    </div> 
</div>  

container2 位置与 container1 位置相同，但 container2 附加在 container1 下面我的意思是它显示在 container1 下面。如何解决这个问题。我需要附加相同的位置。没有改变位置。请解决

Answer 1

这是代码，试试这个

<div id="container" style="position:relative;margin-top:50px;margin-left:50px;width:200px;height:300px;border: 2px solid red;">
      <div id="container1" style="float:left;margin-top:30px;margin-left:30px;width:50px;height:50px;border: 2px solid #a1a1a1;">           
      </div>
    <div id="container2" style="position:relative;margin-top:30px;margin-left:30px;width:50px;height:50px;border: 2px solid green;">
    </div> 
</div>