Neu Bilder mit Unterschriften in einer Reihe platzieren.

surus

Gut bekanntes Mitglied
28. September 2016
269
3
Wir haben ein paar Bilder, die wir in der Artikelbeschreibung in einer Reihe platzieren möchten.

Wir haben z.B. 5 Bilder 100x100 mit Unterschriften (unter dem jeweiligen Bild). Diese möchten wir in einer Reihe platzieren.
Wenn die Bildschirfauflösung es nicht zulässt, sollen Bilder in die nächste Zeile springen.

Momentan ist es so, dass alle Bilder untereinander angezeigt werden.

Wie macht man es am besten?
 

surus

Gut bekanntes Mitglied
28. September 2016
269
3
Hier ist ein Beispiel.

HTML:
<p>Pflegeanleitung</p>

<figure>
<img src="/bilder/intern/Handwaesche.png" alt="Handwäsche">
<figcaption>Handwäsche</figcaption>
</figure>

<figure>
<img src="/bilder/intern/Nicht_trommeltrocknen.png" alt="Nicht trommeltrocknen">
<figcaption>Nicht trommeltrocknen</figcaption>
</figure>

<figure>
<img src="/bilder/intern/Trocknen_(liegend_im_schatten).png" alt="Liegend im Schatten trocknen">
<figcaption>Liegend im Schatten trocknen</figcaption>
</figure>

<figure>
<img src="/bilder/intern/Nicht_buegeln.png" alt="Nicht bügeln">
<figcaption>Nicht bügeln</figcaption>
</figure>

<figure>
<img src="/bilder/intern/Nicht_chemisch_reinigen.png" alt="Nicht chemisch reinigen">
<figcaption>Nicht chemisch reinigen</figcaption>
</figure>
 

martinwolf

Offizieller Servicepartner
SPBanner
6. September 2012
3.145
187
Das Tag "figure" wird über die Bootstrap.css per display: block definiert. Block-Elemente haben die Eigenschaft, dass diese stets die gesamte Breite des Parent-Elements einnehmen und einen umbrechenden Block erzeugen. Du müsstest also eine CSS-Regel definieren wie folgt:
Code:
figure {
  display: inline-block;
}
 

Über uns

  • In unserem moderierten JTL-Forum könnt Ihr Euch themenbezogen mit der JTL-Community rund um die Produkte von JTL, passende Erweiterungen und den E-Commerce im Allgemeinen austauschen, Tipps und Tricks teilen sowie Verbesserungswünsche und Fehler diskutieren.

    Unsere Forumsnutzer helfen sich untereinander auch gerne weiter, wenn Sie mal nicht weiterkommen oder einen Ratschlag benötigen.

Schnell-Navigation

Benutzer Menü