Umieszczanie dwóch elementów div na tym samym poziomie poziomym

Question

Potrzebuję umieścić dwa elementy div na tym samym poziomie poziomym. Robiąc tak, jak zrobiłem, drugi pojawia się pod pierwszym. Chcę umieścić je w taki sposób, aby krzyżowały się ze sobą podczas przejścia.

Edycja 1- Here po naciśnięciu przycisku w celu zamiany klas, elementy div przesuwają się w górę iw dół.

#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. 

Answer 1

Użyj span, czy można ustawić styl do display:inline-block

Answer 2

Można to osiągnąć za pomocą właściwości 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> 

Zobacz ten jsFiddle do demonstracji. Oto wynik:

Answer 3

wierzę chcesz unosić DIV

.float-left{ 
    float:left; 
} 

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

Jeżeli prawo div jest nadal postrzegane jako „blokowym” elementu to zajmie zapasowej całego rząd. Oba elementy muszą być pływające lub muszą zostać określone określone szerokości.

Answer 4

Po prostu ułóż wszystkie lewy lewy, jeśli chcesz, aby były obok siebie.

W zależności od zawartości div, konieczne może być przypisanie szerokości również do każdej klasy.

Answer 5

zobaczyć skrzypce na kod i demo

skrzypce: http://jsfiddle.net/ht6M9/

demo: http://jsfiddle.net/ht6M9/embedded/result/