Resulta que no puedo cambiar la forma de los datos ya que eso lo hace wordpress internamente (lo que está dentro del div: post-content).
Y tengo que con CSS poder conseguir que las imagenes estén alineadas y que los parrafos tengan una separación entre ellos, no se si me explico.
Por ejemplo si pongo el atributo del css padding: 0px, consigo que estén alineadas las imagenes, pero no tengo separacion entre los parrafos.
La idea es poder cojer el selector "p" que contiene a las imagenes y agregarle la regla de padding: 0px, (el "p" de los parrafos tendria padding-bottom:15px, y asi todo está solucionado).
Puedo selccionar el "a" o "img" dentro del "p" de las imagenes, pero agregarles el atributo del padding:0px, no consige nada, ya que el "p" es el que tiene que recibir el atributo.
index.html
Código
<html><head> <link href="estilos.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="post-content"> <p>Parrafo 1</p> <p>Parrafo 2 - Parrafo 2 - Parrafo 2</p> <p>Parrafo 3 - Parrafo 3 - Parrafo 3 - Parrafo 3 </p> <p><a rel="lightbox" href="http://www.enmancora.com/wp-content/uploads/2010/12/ananashahotel_1.jpg"><img class="alignleft size-thumbnail wp-image-86" title="ananashahotel_1" src="http://www.enmancora.com/wp-content/uploads/2010/12/ananashahotel_1-150x150.jpg" alt="" width="150" height="150" /></a></p> <p><a rel="lightbox" href="http://www.enmancora.com/wp-content/uploads/2010/12/ananashahotel_1.jpg"><img class="alignleft size-thumbnail wp-image-86" title="ananashahotel_1" src="http://www.enmancora.com/wp-content/uploads/2010/12/ananashahotel_1-150x150.jpg" alt="" width="150" height="150" /></a></p> <p><a rel="lightbox" href="http://www.enmancora.com/wp-content/uploads/2010/12/ananashahotel_1.jpg"><img class="alignleft size-thumbnail wp-image-86" title="ananashahotel_1" src="http://www.enmancora.com/wp-content/uploads/2010/12/ananashahotel_1-150x150.jpg" alt="" width="150" height="150" /></a></p> <p><a rel="lightbox" href="http://www.enmancora.com/wp-content/uploads/2010/12/ananashahotel_1.jpg"><img class="alignleft size-thumbnail wp-image-86" title="ananashahotel_1" src="http://www.enmancora.com/wp-content/uploads/2010/12/ananashahotel_1-150x150.jpg" alt="" width="150" height="150" /></a></p> <p><a rel="lightbox" href="http://www.enmancora.com/wp-content/uploads/2010/12/ananashahotel_1.jpg"><img class="alignleft size-thumbnail wp-image-86" title="ananashahotel_1" src="http://www.enmancora.com/wp-content/uploads/2010/12/ananashahotel_1-150x150.jpg" alt="" width="150" height="150" /></a></p> <p><a rel="lightbox" href="http://www.enmancora.com/wp-content/uploads/2010/12/ananashahotel_1.jpg"><img class="alignleft size-thumbnail wp-image-86" title="ananashahotel_1" src="http://www.enmancora.com/wp-content/uploads/2010/12/ananashahotel_1-150x150.jpg" alt="" width="150" height="150" /></a></p> </div> </body></html>
estilos:
Código
p { padding: 0px 0px 15px 0px; margin:0px; } img { float:left; }
Espero que alguien sepa como hacerlo.
GRACIAS