ausgegebene Bilder horizontal anzeigen

Question

Ich habe jetzt über folgenden Code programmiert, dass jene Bilder noch einmal angezeigt werden, die von den Vp auf der vorherigen Seite meines Fragebogens ausgewählt wurden sind

$bilder = getItems('PI04', '==', 2);
foreach ($bilder as $bildNum) {
  html('<p>'.getItemtext('PI04', $bildNum).'</p>');
}

Jetzt bin ich froh, dass sie mir auch tatsächlich auch ausgegeben werden, leider aber untereinander.

Welchen Befehl muss ich hinzufügen, dass die 4 ausgewählten Bilder nebeneinander angezeigt werden oder in einer 2x2 Matrix?

Danke!

Answer 1

Welchen Befehl muss ich hinzufügen, dass die 4 ausgewählten Bilder nebeneinander angezeigt werden oder in einer 2x2 Matrix?

Es kommt ein wenig auf die Bildgrößen an. Aber man kann die Bilder ja nach Bedarf skalieren. Hier eine Lösung, welche alle 4 Bilder nebeneinander anzeigt:

$bilder = getItems('PI04', '==', 2);
pageCSS('#bilder > img { width: 22%; margin-right: 3%; }');
html('<div style="margin-right: -3%;" id="bilder">');
foreach ($bilder as $bildNum) {
  html(getItemtext('PI04', $bildNum));
}
html('</div>');

Dadurch werden die Bilder in eine Box (<div>) gepackt, das entfernen des <p> Tags sorgt dafür, dass sie nebeneinander erscheinen und das CSS mittels pageCSS() kümmert sich um die Breite (22% + 3% = 25%). Wenn Sie die Breite im CSS ändern, können Sie auch nur 3 oder 2 Bilder pro Zeile anzeigen.

Comments

Es passt perfekt so!
Vielen lieben Dank!!!