在同一水平面上放置两个div

我需要将两个div元素放在同一水平面上。按照我所做的方式，第二个显示在第一个下方。我想将它们放在一起，让它们在转换时相互交叉。在同一水平面上放置两个div

编辑1- Here当按下按钮交换他们的类时，div上下移动。

#aaidi,#aaidi3 { 
-webkit-transition: margin-left 1s ease-in-out; 
-moz-transition: margin-left 1s ease-in-out; 
-o-transition: margin-left 1s ease-in-out; 
transition: margin-left 1s ease-in-out; 
} 
.left { 
margin-left: 45%; 
border: 1px solid green ; 
width: 20px; 
height: 4px; 
background: #FF0000; 
} // similar for right with margin-left:55% 
...... 
     <tr> 
      <td colspan=3> 
       <div id="aaidi" class="left"> 
       </div> 
       <div id="aaidi3" class="right"> 
       </div> 
      </td> 
     </tr> // after this there is a button pressing whom changes the class of both divs.

来源

2012-04-05 Sumit Sinha

亲爱的看到我的答案，让我知道，如果我落后了一些地方。 – w3uiguru 2012-04-05 16:53:45

谢谢Dinesh，但是当我把按钮放在那里时它不工作。在你的答案中看到评论。 – 2012-04-05 17:03:37

[Here]（http://jsfiddle.net/ht6M9/3/）当按下按钮交换他们的类时，div上下移动。 – 2012-04-05 17:22:27

使用span，也可以将样式设置为display:inline-block

来源

2012-04-05 16:41:33

您可以在此使用float属性实现：

<style type="text/css"> 
    div.container { 
     margin: 15px; 
    } 
    div.left, div.right { 
     float: left; 
     padding: 10px;  
    } 
    div.left { 
     background-color:orange;  
    } 
    div.right { 
     background-color: yellow;  
    } 
</style> 

<div class="container"> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
</div>

的示范看到这个jsFiddle。下面是输出：

enter image description here

来源

2012-04-05 16:42:53

请参阅为什么不能正常工作[链接]（http://jsfiddle.net/ht6M9/1/）.. – 2012-04-05 17:01:18

由于合并的边距等于100％，因此会下降到下一行，这会强制元素下降到下一行。看到这个更新的小提琴：http://jsfiddle.net/ht6M9/2/ – 2012-04-05 17:06:26

[这里]（http://jsfiddle.net/ht6M9/3/）当按下按钮交换他们的类，divs上下移动。 – 2012-04-05 17:20:42

我相信你会喜欢漂浮的div

.float-left{ 
    float:left; 
} 

<div id="aaidi" class="float-left left"></div> 
<div id="aaidi3" class="float-left right"></div>

如果右格仍然被视为一个“块”元素，则其将占据整个行。这两个元素都需要浮动，或者需要设置特定的宽度。

来源

2012-04-05 16:43:18

只需要将所有div都放在左边，如果您要求它们并排放置。

根据div的内容，您可能还需要为每个类指定一个宽度。

来源

2012-04-05 16:46:11 zigojacko

看到捣鼓代码和演示

小提琴：http://jsfiddle.net/ht6M9/

演示：http://jsfiddle.net/ht6M9/embedded/result/

来源

2012-04-05 16:53:06 w3uiguru

，但现在看它不工作[link]（http://jsfiddle.net/ht6M9/1/）.. – 2012-04-05 17:00:14

在同一水平面上放置两个div

回答

相关问题