Question

我想创建两个相同的div和接下来的两个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，右边是另一个。

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

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

4 个答案: