html – 将两个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.

解决方法

您可以使用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以进行演示.这是输出：