Trucos prácticos y técnicas para maquetar en CSS (2)

El siguiente requisito sólo se puede resolver mediante CSS. Queremos que los pares de imagen y pie se adapten al ancho de la ventana del navegador. Flotando los DIVs a la izquierda ya ha resuelto este problema. Si repetimos estas miniaturas varias veces, se adaptarán a la ventana:

Ahora supongamos que teneemos más de una categoría de miniaturas que queremos mostrar en la página, y queremos agruparlas visualmente, con un mismo fondo y/o borde. Simplemente, enciérralos en un DIV contenedor:

div.container {
  border: 2px dashed #333;
  background-color: #ffe;
  }

Sin embargo, al hacerlo nos topamos con un problema. Cuando flotamos un elemento con CSS, ya no consume ningún “espacio” y el fondo y el borde se muestran sobre las imágenes en lugar de rodearlas. Necesitamos poner algo de contenido además de los DIVs flotantes dentro del contenedor DIV. Algo como un DIV que haga de espaciador:

div.spacer {
  clear: both;
  }

El siguiente HTML (fíjate que hay espaciadores en forma de DIVs en la parte superior e inferior del contenedor):

<div class="container">
<div class="spacer">
  &nbsp;
</div>

<div class="float">
  <img src="image1.gif" width="100" height="100"
  alt="image 1" /><br />
  <p>caption 1</p>

</div>

<div class="float">
  <img src="image2.gif" width="100" height="100"
  alt="image 2" /><br />
  <p>caption 2</p>
</div>

<div class="float">
  <img src="image3.gif" width="100" height="100"
  alt="image 3" /><br />
  <p>caption 3</p>
</div>

<div class="spacer">
  &nbsp;

</div>

</div>
    

...nos da como resultado:

Basado en código de Sam Marshall.

Usuarios que han visto este tema también han visto...

- Cómo usar distintos colores en un select menu con CSS?
- Guia basica de hojas de estilo
- CSS: Etiquetas
- Textos con gradiente usando CSS
- Efectos en textos e imágenes con CSS

- Versión imprimible de este documento
- Enviar por e-mail este documento