it-swarm.com.de

Lektion zur Wordpress-Theorie - Bildspalten in Beiträgen mit Ausrichtung?

Ich habe versucht, eine Anfrage eines Kunden zu beantworten, und dachte, ich würde versuchen, ein wenig über die Lösung nachzudenken.

Der Kunde benötigt ein zweispaltiges Post-Layout mit Bildern rechts unten und Text links unten.

Nun, das hat es relativ einfach gemacht (er sagt, es noch nicht ausprobiert zu haben), aber der wahre Ärger ist die nächste Anforderung. Die Bilder in der linken Spalte müssen am Anfang der Absätze in der linken Spalte ausgerichtet sein. Ich habe Mühe, das herauszufinden.

EDIT

Jeder Beitrag 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 Kunde die Site selbst pflegen möchte.

1
Mild Fuzz

Ich hätte gedacht, es geht nur darum, Ihren 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 Absätze des Inhalts und sie nebeneinander schweben lassen. Fügen Sie eine Hülle um die beiden ..

Sie haben also im Grunde zwei Elemente nebeneinander und einen Wrapper, z.

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

Wenn eine der beiden Spalten (schwebende Elemente) eine größere Höhe hat, wird die Umhüllung entsprechend dieser Höhe verlängert, z.

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

oder

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

Und da der Wrapper jedes Ergebnis umgibt, sind die Grundlinien des Bildes und der Absätze immer gleich ...

So erscheinen Ihre Ergebnisse dann so etwas wie ..

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

Offensichtlich sehen echte HTML-Elemente nicht so aus, aber ich hoffe die Illsutration hilft .. :)

2
t31os

Dies ist eher eine CSS-Frage. Sie fügen Ihr Bild-Tag in den Absatz ein (<p><img/>....</p>) und verwenden dann CSS, um die Textbreite zu begrenzen und das Bild nach rechts herauszuschieben:

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