Foros del Web » Creando para Internet » CSS »

Colocar 3 imagenes juntas en horizontal

Estas en el tema de Colocar 3 imagenes juntas en horizontal en el foro de CSS en Foros del Web. Hola, necesito colocar 3 imagenes juntas en horizontal, con unos 5pixeles de separación entre una y otra y un texto centrado dejado de cada una. ...
  #1 (permalink)  
Antiguo 05/06/2013, 11:28
Avatar de Scape  
Fecha de Ingreso: octubre-2006
Mensajes: 626
Antigüedad: 17 años, 5 meses
Puntos: 7
Colocar 3 imagenes juntas en horizontal

Hola, necesito colocar 3 imagenes juntas en horizontal, con unos 5pixeles de separación entre una y otra y un texto centrado dejado de cada una.

Como puedo hacerlo con css?

Gracias
  #2 (permalink)  
Antiguo 05/06/2013, 11:47
 
Fecha de Ingreso: febrero-2012
Ubicación: Guadalajara
Mensajes: 14
Antigüedad: 12 años, 1 mes
Puntos: 1
Respuesta: Colocar 3 imagenes juntas en horizontal

La forma mas facil, es usar divs, tengo una pregunta
Las imagenes son de un tamaño fijo y las tres son iguales??
Que tamaño tienes pensado para contener las 3 imagenes?


Ahora lo puedes hacer asi


<div id="contenedor_principal">
<!--Primera Imagen-->
<div class="contenedor_imagen_texto">
<div class="imagen"><img src="ruta/de/la/imagen"></div>
<div class="texto">Texto debajo de la imagen</div>
</div>

<!--Segunda Imagen-->
<div class="contenedor_imagen_texto">
<div class="imagen"><img src="ruta/de/la/imagen"></div>
<div class="texto">Texto debajo de la imagen</div>
</div>

<!--tercera Imagen-->
<div class="contenedor_imagen_texto">
<div class="imagen"><img src="ruta/de/la/imagen"></div>
<div class="texto">Texto debajo de la imagen</div>
</div>
</div>


La definicion de los estilos, independientemente de donde los hagas, seria algo asi

#contenedor_principal{
width:1024px;
height:auto;
position:relative;
margin:auto;
}
.contenedor_imagen_texto{
width:335px;
height:auto;
position:relative;
display:inline-block;
vertical-align:top;
overflow:hidden;
}
.imagen, .texto{
width:100%;
height:auto;
position:relative;
display:inline;
}
.texto{
height:auto;
text-align:center
}

de esta forma puedes tener sin problemas las 3 imagenes y debajo un texto, ahora esto funciona para imagenes con un tamaño de 335px x npx es decir, que si tienes una imagen mas grande, lo unico que va a pasar es que no va a verse completa.

Prueba y haz tus experimentos.
  #3 (permalink)  
Antiguo 05/06/2013, 11:56
Avatar de Scape  
Fecha de Ingreso: octubre-2006
Mensajes: 626
Antigüedad: 17 años, 5 meses
Puntos: 7
Respuesta: Colocar 3 imagenes juntas en horizontal

Cita:
Iniciado por leinadMajestic Ver Mensaje
La forma mas facil, es usar divs, tengo una pregunta
Las imagenes son de un tamaño fijo y las tres son iguales??
Que tamaño tienes pensado para contener las 3 imagenes?


Ahora lo puedes hacer asi


<div id="contenedor_principal">
<!--Primera Imagen-->
<div class="contenedor_imagen_texto">
<div class="imagen"><img src="ruta/de/la/imagen"></div>
<div class="texto">Texto debajo de la imagen</div>
</div>

<!--Segunda Imagen-->
<div class="contenedor_imagen_texto">
<div class="imagen"><img src="ruta/de/la/imagen"></div>
<div class="texto">Texto debajo de la imagen</div>
</div>

<!--tercera Imagen-->
<div class="contenedor_imagen_texto">
<div class="imagen"><img src="ruta/de/la/imagen"></div>
<div class="texto">Texto debajo de la imagen</div>
</div>
</div>


La definicion de los estilos, independientemente de donde los hagas, seria algo asi

#contenedor_principal{
width:1024px;
height:auto;
position:relative;
margin:auto;
}
.contenedor_imagen_texto{
width:335px;
height:auto;
position:relative;
display:inline-block;
vertical-align:top;
overflow:hidden;
}
.imagen, .texto{
width:100%;
height:auto;
position:relative;
display:inline;
}
.texto{
height:auto;
text-align:center
}

de esta forma puedes tener sin problemas las 3 imagenes y debajo un texto, ahora esto funciona para imagenes con un tamaño de 335px x npx es decir, que si tienes una imagen mas grande, lo unico que va a pasar es que no va a verse completa.

Prueba y haz tus experimentos.
Ah vale, con esto me vale, te lo agradezco mucho.

Un saludo

Etiquetas: horizontal, imagenes, juntas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:59.