如何創建兩個相同的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。彼此相鄰，並在同一水平

回答

相關問題