Home » Tecnología » Caja para tres imagenes en CSS y DIV

Caja para tres imagenes en CSS y DIV

Publicado en: Tecnología

Hola afición!

Quería poner en el blog de wordpress una caja para meter tres imagenes. Según el funcionamiento de este blog, que no admite el tag table, debe hacerse con el tag div. De esta forma, primero configuramos la estructura general de la caja que albergará la página, algo como esto:

<div class="cajamensaje">
<div class="cajaizqcentro">
<h5 class="mensaje">Hueco 1</h5>
</div>
<div class="cajaizqcentro">
<h5 class="mensaje">Hueco 2</h5>
</div>
<div class="cajadcha">
<h5 class="mensaje">Hueco 3</h5>
</div>
<div class="space-line"></div>
</div>

Este código, con sus clases o al gusto, lo escribimos en el cuerpo de nuestro mensaje. En los diferentes Huecos podemos poner imágenes (img) o texto, eso es al gusto y la necesidad.

Ahora llega el turno de modificar o añadir a nuestro archivo .css el siguiente código:

div.cajamensaje{
margin: 0 auto 0 auto;
padding: 5px;
text-align: center;
width: 98%;
border-color: #dbdbdb;
border-width: 1px;
border-style: solid;
}
div.cajaizqcentro{
float: left;
margin: 0;
padding: 0;
width: 33%;
border-style: none;
}
div.cajadcha{
float: right;
margin: 0;
padding: 0;
width: 34%;
border-style: none;
}
div.space-line{
clear: both;
margin: 0;
padding: 0;
width: auto;
}
h5.mensaje{
margin: 0;
padding: 0;
text-align: center;
width: auto;
vertical-align: top;
}

Un poco largo, si, pero necesario, de otra manera obtendríamos resultados inesperados.
Adicionalmente, podemos limitar a que no exista borde en las imágenes que enlacen a su vez a un hipervínculo (a href) escribiendo en el .css de nuestro blog:

a img { border: none; }

Y de esta manera conseguimos introducir en nuestro mensaje una vistosa caja con tres imágenes.

SaludoX

2 Comentarios

  1. Mapi
    |

    Magnífico truco, al fin lo he conseguido. Gracias

  2. monalcar
    |

    Que raro escribes ¿no?