Anzeige: Inline-Blockhöhe

Question

Gibt es eine CSS-Möglichkeit, um Bilder an einer (unteren) Zeile auszurichten, wobei der Text nach oben ausgerichtet ist? Mit anderen Worten, wie diese <li> Elemente gleiche Höhe geben? min-height ist eine schlechte Idee, weil die Anzahl der Buchstaben unbekannt ist, und der Überlauf: versteckt ist, kann auch nicht verwendet werden, da die Benutzer den vollständigen Text sehen sollten.

HTML:

<ul> 
    <li><div class="text">Some random text.<div class="image"></div></div></li> 
    <li><div class="text">Some random text.<div class="image"></div></div></li> 
    <li><div class="text">Some random text.<div class="image"></div></div></li> 
    <li><div class="text">Some random text. Some random text. Some random text.<div class="image"></div></div></li> 
    <li><div class="text">Some random text.<div class="image"></div></div></li> 
</ul> 

CSS:

li { 
    float: left; 
    list-style: none; 
    background-color: #fff; 
} 

li div.text { 
    display: inline-block; 
    vertical-align: baseline; 
    width: 200px; 
    border: 1px solid #eee; 
} 

li div.image { 
    background-image: url('https://www.google.com/logos/doodles/2016/pandit-ravi-shankars-96th-birthday-6265541272535040-hp2x.jpg'); 
    background-size: cover; 
    height: 200px; 
    width: 200px; 
} 

JSFiddle

Answer 1

Versuchen ohne eine Liste und verwenden display: table sie alle die gleiche Höhe zu machen. Da wir wissen, dass das Bild 200px groß ist, werden wir es absolut an den unteren Rand der Box positionieren, mit einer zusätzlichen Füllung von 200px.

<div class="boxes"> 
<div class="row"> 
    <div class="box"> 
    <span>Here's some random text</span> 
    <img src="https://www.google.com/logos/doodles/2016/pandit-ravi-shankars-96th-birthday-6265541272535040-hp2x.jpg" /> 
    </div> 
    <div class="box"> 
    <span>Here's some random text. text text text text text</span> 
    <img src="https://www.google.com/logos/doodles/2016/pandit-ravi-shankars-96th-birthday-6265541272535040-hp2x.jpg" /> 
    </div> 
</div> 
    <div class="row"> 
    <div class="box"> 
    <span>Here's some random text</span> 
    <img src="https://www.google.com/logos/doodles/2016/pandit-ravi-shankars-96th-birthday-6265541272535040-hp2x.jpg" /> 
    </div> 
    <div class="box"> 
    <span>Here's some random text</span> 
    <img src="https://www.google.com/logos/doodles/2016/pandit-ravi-shankars-96th-birthday-6265541272535040-hp2x.jpg" /> 
    </div> 
</div> 
<div class="row"> 
    <div class="box"> 
    <span>Here's some random text</span> 
    <img src="https://www.google.com/logos/doodles/2016/pandit-ravi-shankars-96th-birthday-6265541272535040-hp2x.jpg" /> 
    </div> 
    <div class="box"> 
    <span>Here's some random text. Mooooooooooore Text. And more</span> 
    <img src="https://www.google.com/logos/doodles/2016/pandit-ravi-shankars-96th-birthday-6265541272535040-hp2x.jpg" /> 
    </div> 
</div> 
</div> 

Und hier ist die CSS

boxes{ 
    display: table; 
} 
.row{ 
    display: table-row; 
} 
.box{ 
    position: relative; 
    width: 200px; 
    background: #fff; 
    border: 1px solid #eee; 
    display: table-cell; 
    padding-bottom: 200px; // making space for our image 
} 
img{ 
    position: absolute; 
    height: 200px; 
    width: 200px; 
    bottom: 0; 
} 
span{ 
    display: block; 
    margin: 10px 0; 
} 

https://jsfiddle.net/L5mk352r/2/