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;
}