texte flottant entre deux colonnes avec un espace blanc au milieu

Question

je besoin de concevoir une page similaire à ce

http://www.brightech.co.il/page.png

où le texte et l'image sont dynamiquement insérés dans le côté serveur, et la seule chose qui reste constant est l'espace blanc en dessous de la colonne de gauche. J'ai besoin que le texte continue naturellement du paragraphe dans la colonne en haut à gauche à celui en bas à droite. Maintenant, une solution (qui ne peut pas être en css ..) serait de faire flotter l'image à droite, de créer une div blanche, et de la faire flotter vers le bas. mais il n'y a pas de float: bottom in css ...

J'ai une idée sur la façon de l'implémenter, mais c'est assez lourd du côté du navigateur - ce serait de mettre tout le texte dans un div qui est le colonne de gauche, vérifiez sa hauteur. Si c'est trop long, déplacez le dernier mot dans la colonne de droite. vérifiez à nouveau si la hauteur de la colonne de gauche est trop longue, et déplacez un autre mot, jusqu'à ce qu'il atteigne la bonne hauteur.

J'aimerais entendre d'autres idées sur la façon de le faire puisque ce serait mon dernier recours.

S'il y a une solution webkit css pour cela, ce serait génial, puisque le côté client est mobile-safari.

Merci!

Answer 1

Ce serait probablement diaboliquement amusant à développer à partir de zéro. Mais, si vous utilisez jQuery, il y a au moins 2 plugins qui pourraient le faire.

1. jQuery Masonry plug-in.

2. Le Columnizer jQuery Plugin.

Answer 2

Vous pouvez simplement approcher la hauteur en définissant une limite de caractères en fonction de la hauteur de l'image. Chaque ligne a environ 45 caractères de longueur et 20 pixels de hauteur, donc: 45 * (h/20) serait proche de votre limite de caractères.

Le premier bloc va dans la colonne de gauche, puis une fois la limite de caractères atteinte, il est envoyé vers la droite. Vous pouvez le faire du côté serveur ou en appliquant des classes css avec javascript/jQuery.