Bild und Text nebeneinander

Ein Spaltenblock soll abwechselnd links ein Bild und rechts einen Text enthalten. Danach Wechsel: links der Text und rechts das Bild. Problem ist allerdings die Ansicht bei schmaleren Displays, weil dann Bild – Text – Text – Bild untereinander zu sehen sind. Damit wird aber der Sinnzusammenhang zwischen Text und Bild schwieriger.

Mit einer entsprechenden CSS-Regel kann das behoben werden, siehe hier:

Der Spaltenblock

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Spalten im Gruppenblock

Hier sind zwei Spalten in einem Gruppenblock enthalten. Der Gruppenblock umfasst die „Gesamte Breite“, die Spaltenblöcke „Weite Breite“. Um das deutlich zu machen, habe ich hier als Hintergrundfarbe „grau“ gewählt:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Der Block „Medien und Text“

Beim Block „Medien und Text“ erfolgt das automatisch, sieht aber nicht so gut aus:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.


Schreibe einen Kommentar