6

我需要将两个 div 元素放在同一水平面上。按照我的做法，第二个会显示在第一个下面。我想以一种在过渡时相互交叉的方式放置它们。

编辑 1-当按下按钮交换他们的类时，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.
4

5 回答 5

13

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进行演示。这是输出：

在此处输入图像描述

于 2012-04-05T16:42:53.387 回答
2

使用 a span，或者您可以将样式设置为display:inline-block

于 2012-04-05T16:41:33.943 回答
2

我相信你想浮动 div

.float-left{
  float:left;
}

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

如果右 div 仍被视为“块”元素，那么它将占据整行。两个元素都需要浮动，或者需要设置特定的宽度。

于 2012-04-05T16:43:18.143 回答
1

请参阅小提琴的代码和演示

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

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

于 2012-04-05T16:53:06.010 回答
0

如果您需要并排放置所有 div，只需浮动所有 div。

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

于 2012-04-05T16:46:11.407 回答