Auf Thema antworten

Beitrag

[QUOTE="Sempervivum, post: 14431, member: 3917"]
Ich schlage dir mal eine Lösung vor, die sehr einfach umzusetzen ist.

Als erstes im HTML die Aufteilung in Zeilen heraus nehmen:
[CODE]    <div class="divTable blueTable">

<div class="divTableCell"><a href="pics/klein/bild-clean01.png" data-lightbox="image-1"
                    data-title="Bild 1"><img src="pics/klein/bild-clean01.png" alt="Bild 1" height="50"></a>
                <div class="nummer">1</div>
            </div>

<div class="divTableCell"><a href="pics/klein/bild-clean01.png" data-lightbox="image-1"
                    data-title="Bild 4"><img src="pics/klein/bild-clean01.png" alt="Bild 4" height="50"></a>
                <div class="nummer">4</div>
            </div>

<div class="divTableCell"><a href="pics/klein/bild-clean01.png" data-lightbox="image-1"
                    data-title="Bild 7"><img src="pics/klein/bild-clean01.png" alt="Bild 7" height="50"></a>
                <div class="nummer">7</div>
            </div>
[/CODE]

Und dann im CSS diese Änderungen:
[CODE].divTableBody {
    /* display: table-row-group; */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}[/CODE]d. h. die Elemente mit Flex anordnen, Zeilenumbrüche erlauben und horizontal zentrieren.

Und bei den Zellen ein kleines Margin hinzu fügen, damit sie mehr Abstand bekommen, so wie sie es bisher hatten:
[CODE].divTable.blueTable .divTableBody .divTableCell {
    font-size: 13px;
    margin: 0 1.5em;
}
[/CODE]
[/QUOTE]

Authentifizierung