Ver Mensaje Individual
  #1 (permalink)  
Antiguo 25/07/2016, 18:47
serbarmax
 
Fecha de Ingreso: enero-2003
Mensajes: 120
Antigüedad: 22 años, 3 meses
Puntos: 0
Pregunta Distribuir 4 divs horizontal responsivo

Hola, pueden darme una mano? Intento distribuir horizontalmente 4 divs los cuales debe estar el primero de la izquierda bien al tope izquierdo y el derecho al tope derecho, en el centro los otros dos "en igual distribución", el tema es que en forma responsiva debería acomodarse.
Intenté el siguiente código pero se centra pero no se expande hacia los costados. Muchas gracias.

Código:
<div style="text-align: center; width: 100%;">
<div  style="display: inline-block; width:150px; 150px !important;  height: 117px;">
   <div class="contenedor">
        <a href="index.php/redireccion">
             <img src="images/stories/seguros/icono_simuladoactivo.jpg" alt="" border="0" /> 
             <img class="top" src="images/stories/seguros/icono_simuladoinactivo.jpg" alt="" border="0" />
        </a>
   </div>
</div>
<div  style="display: inline-block; width:150px; 150px !important;  height: 117px;">
   <div class="contenedor">
        <a href="index.php/redireccion">
             <img src="images/stories/seguros/icono_simuladoactivo.jpg" alt="" border="0" /> 
             <img class="top" src="images/stories/seguros/icono_simuladoinactivo.jpg" alt="" border="0" />
        </a>
   </div>
</div>
<div  style="display: inline-block; width:150px; 150px !important;  height: 117px;">
   <div class="contenedor">
        <a href="index.php/redireccion">
             <img src="images/stories/seguros/icono_simuladoactivo.jpg" alt="" border="0" /> 
             <img class="top" src="images/stories/seguros/icono_simuladoinactivo.jpg" alt="" border="0" />
        </a>
   </div>
</div>
<div  style="display: inline-block; width:150px; 150px !important;  height: 117px;">
   <div class="contenedor">
        <a href="index.php/redireccion">
             <img src="images/stories/seguros/icono_simuladoactivo.jpg" alt="" border="0" /> 
             <img class="top" src="images/stories/seguros/icono_simuladoinactivo.jpg" alt="" border="0" />
        </a>
   </div>
</div>
</div>
la clase contenedor permite alternar las imágenes que están presentadas cuando el cursor se posiciona sobre ellas.

Código:
.contenedor {
  position: relative;
  height: 90px; 
  width: 315px; 
  margin: 20px auto;  
}

.contenedor img {
  position: absolute; 
  left: 0; 
  /* transition: opacity 1s ease-in-out; */
}

.contenedor img.top:hover {
  opacity: 0;
}
__________________
Sergio.