Colocando dos divs en el mismo nivel horizontal

Necesito poner dos elementos div en el mismo nivel horizontal. Hacer lo que he hecho hace que el segundo se muestre debajo del primero. Quiero colocarlos de manera que se crucen entre sí durante la transición.Colocando dos divs en el mismo nivel horizontal

Editar 1- Here cuando se presiona el botón para intercambiar sus clases, div se mueve hacia arriba y hacia abajo.

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

Fuente

2012-04-05 Sumit Sinha

Estimado ver mi respuesta y quiero saber si estoy en algún lugar rezagado. – w3uiguru

Gracias Dinesh, pero no funciona cuando coloco el botón allí. Ver comentarios en tu respuesta. –

[Aquí] (http://jsfiddle.net/ht6M9/3/) cuando se presiona el botón para intercambiar sus clases, los divs se mueven hacia arriba y hacia abajo. –

Utilice un span, o puede establecer el estilo de display:inline-block

Fuente

2012-04-05 16:41:33

Esto se puede conseguir mediante la propiedad 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>

ver este jsFiddle para una demostración. Aquí está la salida:

enter image description here

Fuente

2012-04-05 16:42:53

Por favor, vea por qué esto no funciona [link] (http://jsfiddle.net/ht6M9/1/) .. –

Está cayendo a la línea siguiente porque el margen combinado es igual al 100%, lo que obliga al elemento a caer a la siguiente línea. Vea este violín actualizado: http://jsfiddle.net/ht6M9/2/ –

[Aquí] (http://jsfiddle.net/ht6M9/3/) cuando se presiona el botón para intercambiar sus clases, los divs se mueven hacia arriba y hacia abajo . –

Creo que le gustaría hacer flotar la divs

.float-left{ 
    float:left; 
} 

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

Si el div derecha todavía se está viendo como un elemento de 'bloque', entonces se ocupará de la totalidad fila. Ambos elementos deben flotar, o se deben establecer anchos específicos.

Fuente

2012-04-05 16:43:18

Simplemente haga flotar todas las divisiones restantes si las necesita una al lado de la otra.

Según el contenido de div, puede que necesite asignar un ancho a cada clase también.

Fuente

2012-04-05 16:46:11 zigojacko