Bilder mit Hilfe von CSS/HTML wie eine Galerie anordnen

  • CSS

Es gibt 2 Antworten in diesem Thema. Der letzte Beitrag () ist von Marcus Gräfe.

    Bilder mit Hilfe von CSS/HTML wie eine Galerie anordnen

    Ich habe eine Seite mit einem Inhaltsbereich von 950 Pixeln Breite.
    In diesem Bereich möchte ich Bilder in beliebiger Anzahl einfügen.

    Diese Bilder sollen jeweils einen Abstand zueinander haben (horizontal),
    welcher dafür sorgt, dass die einzelnen Reihen den gesamten Raum von Links
    nach Rechts einnehmen. Aussehen soll das wie in folgendem Bild:



    Mein aktueller HTML-Code:

    HTML-Quellcode

    1. <div id="contentMiddle" style="width:950px">
    2. <p style="text-align:justify;">
    3. <a href="/cms/images/gallery/1.jpg" data-lightbox="gallery" data-title="Beschreibung Bild #1"><img src="/cms/images/gallery/thumbs/1.jpg" border="0" width="218" height="124" alt="" class="gallery_img" /></a>
    4. <a href="/cms/images/gallery/2.jpg" data-lightbox="gallery" data-title="Beschreibung Bild #2"><img src="/cms/images/gallery/thumbs/2.jpg" border="0" width="218" height="124" alt="" class="gallery_img" /></a>
    5. <a href="/cms/images/gallery/3.jpg" data-lightbox="gallery" data-title="Beschreibung Bild #3"><img src="/cms/images/gallery/thumbs/3.jpg" border="0" width="218" height="124" alt="" class="gallery_img" /></a>
    6. <a href="/cms/images/gallery/2.jpg" data-lightbox="gallery" data-title="Beschreibung Bild #4"><img src="/cms/images/gallery/thumbs/2.jpg" border="0" width="218" height="124" alt="" class="gallery_img" /></a>
    7. <a href="/cms/images/gallery/3.jpg" data-lightbox="gallery" data-title="Beschreibung Bild #5"><img src="/cms/images/gallery/thumbs/3.jpg" border="0" width="218" height="124" alt="" class="gallery_img" /></a>
    8. <a href="/cms/images/gallery/1.jpg" data-lightbox="gallery" data-title="Beschreibung Bild #6"><img src="/cms/images/gallery/thumbs/1.jpg" border="0" width="218" height="124" alt="" class="gallery_img" /></a>
    9. <a href="/cms/images/gallery/2.jpg" data-lightbox="gallery" data-title="Beschreibung Bild #7"><img src="/cms/images/gallery/thumbs/2.jpg" border="0" width="218" height="124" alt="" class="gallery_img" /></a>
    10. <a href="/cms/images/gallery/3.jpg" data-lightbox="gallery" data-title="Beschreibung Bild #8"><img src="/cms/images/gallery/thumbs/3.jpg" border="0" width="218" height="124" alt="" class="gallery_img" /></a>
    11. <a href="/cms/images/gallery/2.jpg" data-lightbox="gallery" data-title="Beschreibung Bild #9"><img src="/cms/images/gallery/thumbs/2.jpg" border="0" width="218" height="124" alt="" class="gallery_img" /></a>
    12. </p>
    13. </div>


    Und das hierfür nötige CSS:

    CSS-Quellcode

    1. .gallery_img {
    2. border: 1px solid #5D6364;
    3. margin-bottom: 1.5em;
    4. }


    Das große Problem im Moment: Die Bilderanzahl muss nun immer ein Vielfaches von 4 plus 1 sein, also z. B. 5, 9, 13 usw. Das kommt durch das text-align:justify;.

    Einen Abstand rechts kann ich nicht machen, weil sonst das rechte Bild nicht ganz rechts anliegt. Darüber befindet sich nämlich ein Headerbereich und die Galerie soll links und rechts mit diesem Headerbereich bündig sein.

    Hat jemand eine Idee? Oder ist das Vorhaben unmöglich?
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum

    Zwar keine schöne Lösung, aber geht:

    HTML-Quellcode

    1. <span class="gallery_after"></span>
    2. <span class="gallery_after"></span>
    3. <span class="gallery_after"></span>
    am Ende einfügen mit

    CSS-Quellcode

    1. .gallery_after {
    2. display: inline-block;
    3. width: 218px;
    4. }
    Siehe jsbin.com/qaqutojucu/1/edit?html,css,output