Zwei Splaten, zweite etwas versetzt

[joextra]

Hallo,

ich habe sechs Bilder, mit jeweils einer Textbox innerhalb jedes Bildes, die in zwei Spalten angezeigt werden sollen. Soweit auch kein Problem, allerdings muss die zweite Spalte etwas nach unten versetzt sein (siehe Anhang). Ich habe das im Prinzip schon mit folgendem Code gelöst.
HTML:

<div class="wrapper">
    <div class="imageBox" id="91">
        <a href="#">
            <img src="test.jpg" alt="Text 1">
            <div class="imageText">Text 1</div>
        </a>
    </div>
            <div class="imageBox" id="92">
        <a href="#">
            <img src="test.jpg" alt="Text 2">
            <div class="imageText">Text 2</div>
        </a>
    </div>
            <div class="imageBox" id="93">
        <a href="#">
            <img src="test.jpg" alt="Text 3">
            <div class="imageText">Text 3</div>
        </a>
    </div>
            <div class="imageBox" id="94">
        <a href="#">
            <img src="test.jpg" alt="Text 4">
            <div class="imageText">Text 4</div>
        </a>
    </div>
            <div class="imageBox" id="95">
        <a href="#">
            <img src="test.jpg" alt="Text 5">
            <div class="imageText">Text 5</div>
        </a>
    </div>
            <div class="imageBox" id="96">
        <a href="#">
            <img src="test.jpg" alt="Text 6">
            <div class="imageText">Text 6</div>
        </a>
    </div>
</div>

CSS:

.wrapper {
    margin: 0 auto 4em;
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.wrapper .imageBox {
    position: relative;
    float: left;
    width: 50%;
    font-size: 2em;
}

.wrapper .imageBox img {
    width: 100%;
    height: auto;
}

.wrapper .imageBox:nth-of-type(2) {
    margin-top: 2em;
}

.wrapper .imageBox:nth-of-type(n+3):nth-child(odd) {
    margin-top: -2em;
}

.wrapper .imageText {
    position: absolute;
    bottom: calc(2em + 1em);
    left: .8em;
    width: 80%;
    color: #fff;
}

.wrapper .imageBox:nth-of-type(n+2):nth-child(even) .imageText {
    bottom: 1em;
}

Das funktioniert auch, allerdings frage ich mich ob es eine saubere/bessere/elegantere Möglichkeit gibt. Wicht ist, das jede Bildbox einzeln sein muss. Ich kann also nicht um jede Spalte ein div legen. Sonst wäre es ja einfach.

Danke

 

[MrMurphy]

allerdings frage ich mich ob es eine saubere/bessere/elegantere Möglichkeit gibt

Ja. Was im Endeffekt am sinnvollsten ist kann aus deinen Quellcodeschnipseln niemand beantworten. Zudem kennen wir weder die Bilder noch ihre Größe. Bliebe also nur ohne viele Anhaltspunkte zu spekulieren.

Zum Beispiel dürfen div-Elemente nach den aktuellen HTML-Regel nur noch verwendet werden, wenn es keine geeigneteren gibt. Zudem gehören Texte in die dafür gedachten Elemente wie p, h1, h2, li, dt, dd und und und. Nicht aber in Container wie div.

In deinem Fall scheinen section, img, figure und figcaption angebracht. Oder auch das a-Element mit dem p-Element.

Auch das CSS sollte verschlankt werden. float und position sind definitiv falsch. Für die von dir gewünschte Anordnung wird CSS-Grid am sinnvollsten sein.