javascript - 同じ 2 つの div を作成する方法。隣同士で同じレベル

Question

同じ 2 つの div と次の 2 つの div を作成したい!

しかし、私のコードでは、2 番目の 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

幅 450px を 448px に縮小します。それが動作します。

Answer 2

実際には非常に簡単です。border:0px でテーブルを作成するだけです。1 つの tr 内に 2 つの 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>

Answer 3

両方の div を使用してフローティング

col2.style.float ='left';