Oggi mi sono imbattuto in un caso interessante su un layout di WordPress. In pratica le immagini dei post visualizzate in una categoria erano più alte del contenuto adiacente e il link "Leggi tutto" si affiancava all'immagine a causa del floating, mentre sarebbe dovuto comparire dopo l'immagine. Ecco come ho risolto questo problema con jQuery.
Avevo una struttura di questo tipo:
<div class="post">
<div class="featured-image">...</div>
<p>...</p>
<p><a href="#" class="more-link">Leggi tutto</a></p>
</div>
<div class="post-meta">...</div>
Anche applicando il clear il link non poteva comparire dopo l'immagine, in quanto quest'ultima era più alta del dovuto (212 pixel). Quindi ho spostato l'intero paragrafo dopo il contenuto del post, in questo modo:
$('p').each(function() {
var $p = $(this);
var post = $p.parent();
if($('a.more-link', $p).length) {
var copy = $p.clone();
$p.remove();
$(copy).insertBefore(post.next());
}
});
Si tratta di una soluzione esportabile in molti contesti analoghi.