6

2つのdiv要素を同じ水平レベルに配置する必要があります。私が行った方法を実行すると、2番目のものが最初のものの下に表示されます。トランジション中に交差するように配置したいと思います。

編集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

私はあなたが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 に答える
2

を使用するspanか、スタイルをdisplay:inline-block

于 2012-04-05T16:41:33.943 に答える
1

コードとデモについてはフィドルを参照してください

フィドル: http://jsfiddle.net/ht6M9/

デモ: http://jsfiddle.net/ht6M9/embedded/result/

于 2012-04-05T16:53:06.010 に答える
0

横に並べる必要がある場合は、すべての div を左にフロートします。

div の内容によっては、各クラスにも幅を割り当てる必要がある場合があります。

于 2012-04-05T16:46:11.407 に答える