Comunidad de diseño web y desarrollo en internet online

como distribuir 5 divs horizontalmente responsivo

Citar            
MensajeEscrito el 25 Jul 2016 11:04 pm
Hola, pueden darme una mano? Intento distribuir horizontalmente 5 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 tres 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;
}

Por serbarmax

2 de clabLevel



 

chrome
Citar            
MensajeEscrito el 26 Jul 2016 12:37 am
Perdón son 4 divs no 5 jaja

Por serbarmax

2 de clabLevel



 

chrome
Citar            
MensajeEscrito el 26 Jul 2016 09:35 pm
Bueno parece que no hay nadie que sepa... :(

Por serbarmax

2 de clabLevel



 

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.