wie zum vertikalen Ausrichten unterer inline Blockelemente in Behälter

Question

Ich habe folgende HTML-Struktur

<div class="examples"> 
    <div class="option"></div> 
    <div class="option"></div> 
    <div class="option"></div> 
</div> 

CSS:

.examples { 
    whitespace: nowrap; 
    min-height: 400px; 
} 
.option { 
    width: 18%; 
    max-width: 18%; 
    margin-top: 10px; 
    margin-bottom: 10px; 
    margin-right: 1%; 
    vertical-align: bottom; 
    cursor: pointer; 
    border: 4px solid red; 
    display: inline-block; 
} 

Wie kann ich vertikal inline Blöcke (Option) am unteren Ende des ALIGN Container (Beispiele) mit CSS? Dies sind eine Reihe von Bildern innerhalb des Beispielcontainers. Ich habe versucht, vertikale Ausrichtung: unten, aber das funktioniert nicht, und ich möchte aus Flex wegen mangelnder Cross-Browser-Unterstützung bleiben. Ich möchte auch von der absoluten Position weg bleiben, weil die Elemente (Option) eine Reihe von Bildern sind.

Answer 1

Wahrscheinlich möchten Sie flexbox verwenden und display: flex; justify-content: flex-end; auf dem Container div. Verwenden. Das sollte sie auf den Grund bringen.

Answer 2

.examples { 
 
    whitespace: nowrap; 
 
    min-height: 400px; 
 

 
    position: relative; 
 
    background: blue; 
 
} 
 

 
.aligner { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
} 
 

 
.option { 
 
    width: 18%; 
 
    max-width: 18%; 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
    margin-right: 1%; 
 
    cursor: pointer; 
 
    border: 4px solid red; 
 
    display: inline-block; 
 
}

<div class="examples"> 
 
    <div class="aligner"> 
 
    <div class="option"></div> 
 
    <div class="option"></div> 
 
    <div class="option"></div> 
 
    </div> 
 
</div>