Frage Wie kann ich meine Website Idee richtig umsetzen?

[RLITEMS]

Ich habe hier mal ein Bild angehängt auf dem Grob aufgezeichnet ist wie ich mir das ganze Vorstelle.
Ich bekomme es nicht hin, die Bilder so nebeneinander und auch untereinander zu positionieren.
Ich habe es schon mit Listen versucht, aber wenn ich die Bilder weiter auseinander stelle, verändert sich die Position des Textes. Die Bilder sollen übrigens alle gleich groß sein (120px) und die Texte zentriert unter den Bildern. Die Bilder sollen einen Link enthalten, aber das kann ich selber. Ich bin ein ziemlicher Anfänger was HTML/CSS betrifft, aber ich lerne weiterhin.

Danke schon mal für alle Antworten :)

 

[Aaron3219]

Die wahrscheinlich beste und unkomplizierteste Lösung lautet Flexboxen.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

[RLITEMS]

Danke :)
Ich werde das mal Ausprobieren.

 

[RLITEMS]

Die wahrscheinlich beste und unkomplizierteste Lösung lautet Flexboxen.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Auf dieser Seite wird allerdings nur der CSS code angegeben. Ich habe keinen Plan was ich in meine HTML Datei eingeben soll.

 

[Aaron3219]

Ganz normale divs.

<style>
.whatever {
      display: flex;
      ...
}
</style>

<div class="whatever">
content
</div>

 

[Aaron3219]

Deine Struktur sieht so aus:

<div class="flex">
          <img src=""><img src=""><img src="">
</div>

<div class="flex">
          <img src=""><img src=""><img src="">
</div>

<div class="flex">
          <img src=""><img src=""><img src="">
</div>

So und jetzt noch eben die flex-klasse:

.flex {
      display:flex; //macht eine Flexbox
      flex-flow: row; //macht, dass die Bilder HINTEREINANDER angezeigt werden
      //flex-flow:column wäre untereinander
}

 

[RLITEMS]

Deine Struktur sieht so aus:

<div class="flex">
          <img src=""><img src=""><img src="">
</div>

<div class="flex">
          <img src=""><img src=""><img src="">
</div>

<div class="flex">
          <img src=""><img src=""><img src="">
</div>

So und jetzt noch eben die flex-klasse:

.flex {
      display:flex; //macht eine Flexbox
      flex-flow: row; //macht, dass die Bilder HINTEREINANDER angezeigt werden
      //flex-flow:column wäre untereinander
}

Danke für die Antwort!
Wenn ich das so mache wie du es mir vorgeschlagen hast, reihen sich die Bilder untereinander. Ich will aber dass die Bilder, wenn ich einen neuen Bereich (div) erstelle, ein stück nach rechts, also neben die anderen Bilder gehen.
So dass ich mehrer Reihen machen kann.