Wie Bilder samt Unterschrift nebeneinander anordnen?

A

Aladin033

Aktives Mitglied
Thread Starter
Dabei seit
22.08.2015
Beiträge
1.709
Reaktionspunkte
184
Moin,

ich möchte gerne 3 Bilder nebeneinander angeordnet haben.
Ebenso die Bildunterschrift zentriert darunter.
Das bekomme ich aber nicht hin.

So sieht meine HTML aus:
HTML: 
<!DOCTYPE html>
<html>
        <header>
            <meta charset="UTF-8"> 
                <title>Festival Tickets</title>
                <link rel="Stylesheet" type="text/css" href="Festival.css">
        </header>
        <body>
        <h1>Festival Tickets</h1>
        <div class="Ticke">
        <a href="BRAINCRUSHER FESTIVAL.html"><img src="BRAINCRUSHER FESTIVAL.png" width="150" height="300" border="0" alt="BRAINCRUSHER FESTIVAL"/></a>
        <figcaption>
            <b><p>BRAINCRUSHER FESTIVAL</p></b>
            <p>Hirschaid, 26,-27.03.2021<p>
            <b><p>Ticket - 70,40 EUR</p></b>
        </figcaption>
        </div>
        <div class="Ticket">
            <a href="HAMMER AND IRON FESTIVAL.html"><img src="HAMMER AND IRON FESTIVAL.png" width="150" height="300" border="0" alt="HAMMER AND IRON FESTIVAL"/></a>
            <figcaption>
                <b><p>HAMMER AND IRON FESTIVAL</p></b>
                <p>Essen, 15.01.2022</p>
                <b><p>Ticket - 49,50 EUR</p></b>
            </figcaption>
        </div>
        <div class="Ticket">
            <a href="HAMMER OF DOOM.html"><img src="HAMMER OF DOOM.png" width="150" height="300" border="0" alt="HAMMER OF DOOM"/></a>
            <figcaption>
                <b><p>HAMMER OF DOOM</p></b>
                <p>Würzburg, 12.-13-11-2021</p>
                <b><p>Ticket - 41,80 EUR</p></b>
            </figcaption>
        
        </div>
        
        </body>       
</html>
 
Meine CSS sieht wie folgt aus:
CSS: 
.img150
{
float: left;
width: 150px;
padding: 3px;
font-size: 0.7em;
}

figure {
    text-align: center;
  }

  figcaption {
    display: inline-block;
    text-align: left;
  }
 
Mach das sonst mit display: flex;

Dafür müsstest du nur einen Container (div) übergeordnet anlegen und diesem display: flex; geben. :teeth:

CSS: 
.flex-container { display: flex; }
img { padding: 3px; font-size: 0.7em; }
figure { text-align: center; }
figcaption { text-align: left; width: 150px; }

HTML: 
<div class="flex-container">
<div class="Ticket">
        <a href="BRAINCRUSHER FESTIVAL.html"><img src="BRAINCRUSHER FESTIVAL.png" width="150" height="300" border="0" alt="BRAINCRUSHER FESTIVAL"/></a>
        <figcaption>
            <b><p>BRAINCRUSHER FESTIVAL</p></b>
            <p>Hirschaid, 26,-27.03.2021<p>
            <b><p>Ticket - 70,40 EUR</p></b>
        </figcaption>
        </div>
        <div class="Ticket">
            <a href="HAMMER AND IRON FESTIVAL.html"><img src="HAMMER AND IRON FESTIVAL.png" width="150" height="300" border="0" alt="HAMMER AND IRON FESTIVAL"/></a>
            <figcaption>
                <b><p>HAMMER AND IRON FESTIVAL</p></b>
                <p>Essen, 15.01.2022</p>
                <b><p>Ticket - 49,50 EUR</p></b>
            </figcaption>
        </div>
        <div class="Ticket">
            <a href="HAMMER OF DOOM.html"><img src="HAMMER OF DOOM.png" width="150" height="300" border="0" alt="HAMMER OF DOOM"/></a>
            <figcaption>
                <b><p>HAMMER OF DOOM</p></b>
                <p>Würzburg, 12.-13-11-2021</p>
                <b><p>Ticket - 41,80 EUR</p></b>
            </figcaption>
      
        </div>
    </div> <!-- /flex-container -->
 
Zuletzt bearbeitet:
habe es jetzt mit Tabellen gelöst, ging auch.
Oder ist das nicht mehr zeitgemäß?
 
Aladin033 schrieb:
habe es jetzt mit Tabellen gelöst, ging auch.
Oder ist das nicht mehr zeitgemäß?
Zum Vergrößern anklicken....
Tabellen bzw. tables sind nicht responsiv – out of the box.
Um Tabellen responsiv zu bekommen (Smartphone Displays), kostet Zeit und Nerven.
 
Okay dann bau ich das wieder um :)
 
Tabellen sind nicht per se unzeitgemäß. Tabellarische Inhalte wären semantisch in einer Tabelle auch korrekt aufgehoben. Aber Tabellen sollten kein Workaround für Layoutprobleme sein. Flexbox ist hier deutlich flexibler, z.B. um bei bestimmten Breakpoints die Anordnung an schmälere Displays anzupassen.
 
  • Gefällt mir
Reaktionen: Difool
…und achte mal auf Tippfehler im css und html. ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten