Alinear imágenes a izquierda o derecha con pie de foto

No controlo mucho. ¿Qué orden dar para colocar imágenes a izquierda o derecha con su pie de imágenes correspondientes y que el texto se ajuste en bandera? Disculpad. Este es el código que he puesto. La imagen se va a la izquierda, pero el pie de foto no le sigue. Quiero alinear foto y pie a la izquierda y que fluya contenido a la derecha. Gracias de antemano.

Respuestas

Como no nos muestras el código HTML que estás utilizando, vamos a suponer que es algo como lo siguiente:

<div>
    <img src="...">
    <p>Lorem ipsum dolor sit amet.</p>
</div>

Para mostrar esa imagen alineada a la izquierda de los contenidos, aplica una clase CSS al elemento <div> y después utiliza los siguientes estilos CSS:

<div class="imagen izquierda">
    <img src="...">
    <p>Lorem ipsum dolor sit amet.</p>
</div>

.imagen.izquierda {
    float: left;
    margin: 1em 1em 1em 0;
}
.imagen.izquierda p {
    margin: .5em 0;
}

Y para mostrar la imagen alineada a la derecha, utiliza lo siguiente:

<div class="imagen derecha">
    <img src="...">
    <p>Lorem ipsum dolor sit amet.</p>
</div>

.imagen.derecha {
    float: right;
    margin: 1em 0 1em 1em;
}
.imagen.derecha p {
    margin: .5em 0;
    text-align: right;
}

@javiereguiluz

24 febrero 2015, 9:17