[CSS] Übersicht in Bildern ✤✤

Auf Wunsch heute ein kleines Tutorial zum Thema Übersicht in Bildern, auch "Wie man Bilder in Blogger" nebeneinander platziert etc.

Unser Endergebnis wird ausschauen wie die statischen Seiten die ihr unter Rezepte und DIY findet. Aber weil ich grad noch was mit dem Hover ausprobieren wollte, hab ich trotzdem ein DEMO geschrieben, die Bilder wurden mit der gleichen Technik nebeneinander platziert.
Okay. Zu Beginn braucht ihr eure Bilder, die direkt die richtige Grösse haben sollten. Ich mag quadratisch und denke, dass 200px Breite eigentlich reichen.

Habt ihr das gemacht, ladet ihr eure Bilder bei Picasa hoch.
Die Bilder werden in einen Figure-Tag gepackt. In diesem Figure-Tag platzieren wir das Bild in einem Link, der Link soll dann zu unserem Post führen.
Und die ganzen figure-Tags kommen dann noch in einen div-Container, weil wir den noch richtig platzieren wollen.

Der Grundaufbau schaut also so aus:
<div>
<figure><a href="POSTLINK"><img src="BILDLINK"/></a></figure>
<figure><a href="POSTLINK"><img src="BILDLINK"/></a></figure>
<figure><a href="POSTLINK"><img src="BILDLINK"/></a></figure>
</div>

Ich hab das jetzt mal hier unten gemacht und es schaut jetzt noch so aus:

Das ist nicht ganz das, was wir haben wollen.
Wir brauchen das gute alte CSS.
In der statischen Seite fügen wir also folgende CSS ein:
<style>
figure {
display: table-cell;
padding: 0 4px;
text-align: center
}
</style>
Und dann fügen wir im div-Container auch noch eine kleine CSS ein und schon sind eure Bilder schön nebeneinander angeordnet.
So schaut der Code dann am Ende bei mir aus:
<div style="display: table; width: 100%;">
<figure><a href="http://goo.gl/wA6IW"><img src="http://goo.gl/wX70n" /></a></figure>
<figure><a href="http://goo.gl/wA6IW"><img src="http://goo.gl/vw24W" /></a></figure>
<figure><a href="http://goo.gl/wA6IW"><img src="http://goo.gl/WuVPk" /></a></figure>
</div>

Und wenn ihr dann noch bisschen weiter rumspielt könnt ihr auch noch bisschen mit Hovern experimentieren, und das ganze nach eurem Willen gestalten. :)
Ich hoffe, dass dieses kleine Tutorial hilfreich war, und ihr was damit anfangen könnt.