WordPress Theory Lesson – Bildspalten in Posts mit Alignment?

Ich versuchte, eine Anfrage eines Kunden zu beantworten, und dachte, ich würde versuchen, die Lösung ein wenig zu verbergen.

Der Client benötigt ein zweispaltiges Postlayout mit Bildern rechts und Text links.

Nun, das hat es relativ geradlinig gebissen (er sagt, es noch nicht versucht zu haben), aber das wirkliche Problem ist die nächste Anforderung. Die Bilder in der linken Spalte müssen mit den Starts der Absätze in der linken Spalte übereinstimmen. Ich habe Mühe, das herauszufinden.

BEARBEITEN

Jeder Post kann mehrere Absätze enthalten, die möglicherweise Bilder enthalten, die ausgerichtet werden müssen.

Das Backend muss frei von manuellem HTML sein, da der Client die Site selbst pflegen möchte.

Solutions Collecting From Web of "WordPress Theory Lesson – Bildspalten in Posts mit Alignment?"

Ich hätte gedacht, dass es nur darum geht, den HTML-Code so zu formulieren, dass die Anforderungen an die Bildausrichtung erfüllt werden.

Sie könnten zwei separate Elemente haben, eines für das Bild des Posts, eines für Absatz (e) des Inhalts, und sie nebeneinander schweben lassen. Fügen Sie eine Hülle um die zwei ..

Sie haben also grundsätzlich zwei Elemente, Seite an Seite und einen Wrapper, zB ..

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

Wenn eine der beiden Spalten (floated-Elemente) eine größere Höhe hat, wird die Hülle entsprechend dieser Höhe erweitert.

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

oder

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

Und weil der Wrapper jedes Ergebnis umgibt, sind die Grundlinie des Bildes und die Absätze immer gleich …

Ihre Ergebnisse sehen dann so aus ..

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

Offensichtlich sehen echte HTML-Elemente nicht so aus, aber ich hoffe, dass die Illusion hilft .. 🙂

Dies ist eher eine CSS-Frage. Sie setzen Ihr Bild-Tag in den Absatz (

....

) und verwenden dann CSS, um die

....

zu begrenzen und das Bild nach rechts zu schieben:

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