如何创建两个相同的div。彼此相邻，并在同一水平

我想创建两个相同的和下一个彼此的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);

来源

2013-04-17 Milka Salkova

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。

来源

2013-04-17 05:57:01

谢谢我试过了，它现在可以工作了！ –

同时使用DIV漂浮

col2.style.float ='left';

来源

2013-04-17 05:52:30

将宽度从450px减少到448px。它会工作。

来源

2013-04-17 05:58:15 mathew

它其实很简单：只需创建一个带有border：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>

来源

2013-04-17 06:02:49 Anil

如何创建两个相同的div。彼此相邻，并在同一水平

回答

相关问题