Neu Bilder mit Unterschriften in einer Reihe platzieren.

[surus]

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?

 

[martinwolf]

Dafür müsste man mal das HTML oder noch besser, die Liveseite sehen.

 

[surus]

Hier ist ein Beispiel.

<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]

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:

figure {
  display: inline-block;
}

 

[surus]

Leider hat es nicht geholfen