ekran: satır içi blok yüksekliği

Question

Görüntülerin bir (alt) satıra hizalanması için metin, en üste hizalanmış bir css yolu var mı? Başka bir deyişle, bu <li> öğelerinin eşit yüksekliğe nasıl verileceği? min-height kötü bir fikirdir 'çünkü harflerin miktarı bilinmemekte ve taşma: gizli de kullanıcıların tam metni görmesi gerektiği için kullanılamaz.

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; 
} 

bir liste olmadan

JSFiddle

Answer 1

deneyin ve ekran kullanın: hepsini aynı yüksekliğe yapmak için tablo. Görüntünün 200 piksel uzunluğunda olduğunu bildiğimiz için, 200px dolgu eklenmesiyle kutunun altına yerleştireceğiz.

<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> 

Ve burada

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/