web-dev-qa-db-fra.com

Cours Wordpress Theory - Colonnes des images dans les messages avec alignement?

J'essayais de me résoudre à la demande d'un client et je pensais essayer de comprendre un peu la solution.

Le client requiert une mise en page de publication sur deux colonnes, avec des images en bas à droite et du texte à gauche.

Maintenant, cela a été relativement simple (il dit, ne l’ayant pas encore essayé), mais le vrai problème est la prochaine condition. Les images de la colonne de gauche doivent s’aligner sur le début des paragraphes de la colonne de gauche. J'ai du mal à comprendre cela.

EDIT

Chaque publication peut contenir plusieurs paragraphes qui peuvent ou non comporter des images nécessitant un alignement.

Le backend doit être exempt de HTML manuel, car le client souhaite maintenir le site lui-même.

postsimagescsscolumns
1
Mild Fuzz

J'aurais pensé qu'il suffisait de formuler votre code HTML de manière à répondre aux exigences d'alignement des images.

Vous pouvez avoir deux éléments distincts, un pour l'image de la publication, un pour le (s) paragraphe (s) de contenu et les faire flotter côte à côte. Ajouter une enveloppe autour des deux ..

Donc, vous avez essentiellement deux éléments, côte à côte et une enveloppe, par exemple ..

+------------+
|+----++----+|
||    ||    ||
|+----++----+|
+------------+

Si l'une des deux colonnes (éléments flottants) a une hauteur supérieure, le wrapper s'étend pour correspondre à cette hauteur, par exemple ..

+------------+
|+----++----+|
||    ||    ||
|+----+|    ||
|      +----+|
+------------+

ou

+------------+
|+----++----+|
||    ||    ||
||    |+----+|
|+----+      |
+------------+

Et comme le wrapper entoure chaque résultat, la ligne de base de l'image et des paragraphes sont toujours les mêmes ...

Donc, vos résultats apparaissent alors quelque chose comme ..

+------------+
|+----++----+|
||    ||    ||
|+----+|    ||
|      +----+|
+------------+
|+----++----+|
||    ||    ||
||    |+----+|
|+----+      |
+------------+
|+----++----+|
||    ||    ||
|+----+|    ||
|      +----+|
+------------+

Évidemment, les vrais éléments HTML ne ressemblent pas du tout à ça, mais j'espère que la désagrégation va aider .. :)

2
t31os

C'est plus une question de CSS. Vous placez votre balise d'image dans le paragraphe (<p><img/>....</p>), puis utilisez CSS pour limiter la largeur du texte et poussez l'image vers la droite:

p { padding: 0 200px 0 0; }
p img { float: right; width: 200px; height: 200px; margin: 0 -200px 0 0; }
1
wyrfel