css - 显示 : inline-block height

Question

是否有一种 css 方式可以使图像与一行(底部)对齐，而文本与顶部对齐？也就是说，如何给这些<li>元素等高？ min-height 是个坏主意，因为字母数量未知，并且 overflow:hidden 也不能使用，因为用户应该看到全文。

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

尝试不使用列表并使用 display: table 使它们具有相同的高度。因为我们知道图像的高度为 200 像素，所以我们将绝对定位到框的底部，并添加 200 像素的内边距。

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

这是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/