da man Tabellen-Layouts nur noch für "echte" Tabellen einsetzen soll, versuche ich verschiedene alte Layouts nun per CSS zu transformieren.
Leider scheitere ich daran, mehrere Fotos in einem flexiblen Container gleichmäßig verteilt und jeweils zentriert darzustellen.
- variable Gesamtbreite der Foto-Leiste
- die Fotos verteilen sich gleichmäßig horizontal (nebeneinander!)
- Fotobeschreibungen unterhalb jeweils zentriert
Code: Alles auswählen
|-----------------------------------------------------------------------|
| | | | |
| ####### | ####### | ####### | ####### |
| # # | # # | # # | # # |
| # # | # # | # # | # # |
| # # | # # | # # | # # |
| ####### | ####### | ####### | ####### |
| F 1 | F 2 | F 3 | F 4 |
| | | | |
|-----------------------------------------------------------------------|
Code: Alles auswählen
<table width="100%" border="0">
<tr>
<td align="center"><img src="url1" width="100"><br />F1</td>
<td align="center"><img src="url2" width="100"><br />F2</td>
<td align="center"><img src="url3" width="100"><br />F3</td>
<td align="center"><img src="url4" width="100"><br />F4</td>
</tr>
</table>
Wie setze ich das in CSS um, damit es sich exakt genauso verhält???
So einfach klappt es jedenfalls nicht:
Code: Alles auswählen
CSS:
#gesamt {
width: 100%; // Achtung: variable Breite !!!
}
.spalten {
display: inline;
text-align: center;
}
.spalten img {
width: 100px;
margin-left: auto;
margin-right: auto;
}
-------------------------------
HTML:
<div id="gesamt">
<div class="spalten"><img src="url1"></div>
<div class="spalten"><img src="url2"></div>
<div class="spalten"><img src="url3"></div>
<div class="spalten"><img src="url4"></div>
</div>
Kann mir jemand helfen?
Vielen lieben Dank