我需要将两个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>
