Frage CSS Bilder Raster erstellen

[GradeFX]

Ich habe für eine Galerie auf meiner Website ein Raster erstellt, jedoch funktioniert es nicht so wie ich es mir vorgestellt habe.
Es sollen drei Images + Rahmen und Text in jeder Reihe sein aber ich konnte es nur so hinkriegen http://gradefx.de/

Hier Quellcode
html-code: http://pastebin.com/3uJdLfCq
css-code: http://pastebin.com/EHFmn8zz
Screenshot: http://prntscr.com/d97zdj

Hoffentlich kann mir einer von Euch verraten wie das funktioniert/was Ich falsch gemacht habe!

 

[SpiceLab]

Es sollen drei Images + Rahmen und Text in jeder Reihe sein aber ich konnte es nur so hinkriegen http://gradefx.de/

Auf meinem Monitor mit 1920px Breite passen drei von denen sauber nebeneinander.

Ergo solltest Du Dir im Vorfeld Gedanken darüber machen, wie Du den diversen Auflösungen bis runter zum kleinen Smartphone-Display begegnen willst, und wie sich die Bilder entsprechend verhalten sollen.

Oder Du belässt es dabei, sparst Dir die Zeit und den Aufwand, und greifst stattdessen auf ein CSS-Framework wie Bootstrap (englisch http://getbootstrap.com/ | deutsch http://holdirbootstrap.de/) zurück, das Dir diese Arbeit mit seinem Gridsystem abnimmt.

Es sind sogar genügend variantenreiche Vorlagen im Netz frei/kostenlos verfügbar, die auf Bootstrap basieren:

• http://bootply.com/tagged/gallery
• http://bootsnipp.com/tags/gallery
  
• https://startbootstrap.com/template-overviews/thumbnail-gallery/
• http://www.jqueryscript.net/demo/Responsive-Photo-Gallery-with-jQuery-and-Bootstrap-3/
  
• ...

Und sowas hier:

<div class="tinypic">
     <a alt="Bild 1" href="https://www.google.de/" target="_blank"><img src="grid/Bild1.png"></a>
     <p>Bild 1</p>
</div>

stammt noch aus den Zeiten vor HTML5.

Heutzutage bedient man sich dem <figure>-Element, anstelle des semantisch bedeutungslosen <div>, um ein Bild mit einem Bilduntertitel auszustatten:

• https://wiki.selfhtml.org/wiki/HTML/Textstrukturierung/figure
• https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Bilder_präsentieren

 

[GradeFX]

Danke dir! Unser Informatik Lehrer ist schon etwas älter und hat uns nur HTML 4 gezeigt... Tja

 

[SpiceLab]

Danke dir! Unser Informatik Lehrer ist schon etwas älter und hat uns nur HTML 4 gezeigt... Tja

Tja,...

Mein Arbeitgeber stellt mich spätestens nach 2 Jahren zur beruflichen Weiterbildung frei, um u.a. in technischen Fragen (Architektur, Bauwesen) nicht irgendwann den Anschluß zu verlieren, was State-Of-The-Art ist