javascript - 如何创建两个相同的 div。彼此相邻且处于同一水平

Question

我想创建两个相同的 div 和下两个彼此！

但在我的代码中，第二个 div (col2) 位于 dov col1 旁边，但在它之下（不在同一级别）。我怎样才能改变它

var wrap=document.createElement("div");
        wrap.style.width= '900px';
        wrap.style.margin= '0 auto';
       wrap.style.height= '280px';

        var col1=document.createElement("div");
        col1.style.float= 'left';
        col1.style.width= '450px';
        col1.style.height= '280px';
        col1.style.border= '1px solid';



        var col2=document.createElement("div");
        col2.style.marginLeft ='450px';
        col2.style.width= '450px';
        col2.style.border = '1px solid green';

        var txtNode=document.createTextNode("Item 1 -Hor");

        col2.appendChild(txtNode);

        wrap.appendChild(col1);
                wrap.appendChild(col2);

Answer 1

http://jsfiddle.net/cdbVj/1/

我创造了一个小提琴。

CSS：

.first{
    height:100px;
    width:200px;
    border:1px red solid;
    float:left;
}

.second{
    position:absolute;
    width:200px;
    height:100px;

    margin-left:210px;
    border: 1px black solid;
}

HTML：

 <div class ="parent">
        <div class="first">FIRST</div>
        <div class="second">SECOND</div>
    </div>

您可以相应地发布css。

Answer 2

将宽度 450px 减小到 448px。它会起作用的。

Answer 3

使用两个 div 都是浮动的

col2.style.float ='left';

Answer 4

它实际上很简单：只需创建一个边框为：0px 的表格。将两个 div 放在一个 tr 中，第一个 div 左对齐，另一个 div 右对齐。

<table style="border: 0px" data-role="content">
  <tr style="border: 0px">
     <td style="border: 0px">
        <div align="left"  data-role="content" style="text-align: center;">
            <div align="left" style="font-weight: bold; color: black;">
                 <p id="id" style="font-size: 22px;"></p>
        </div>
         </div>
     </td>
     <td style="border: 0px">
        <div align="right" data-role="content" style="text-align: center;">
    <button>my button</button>
        </div>
    </td>
   </tr>
 </table>