Question

是否有一种css方式使图像与一条（底部）线对齐，文字与顶部对齐？换句话说，如何赋予这些<li>元素相同的高度？ min-height是一个坏主意'因为字母数量未知，而溢出：隐藏也不能用作用户应该看全文。

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像素，因此我们将绝对定位到框的底部，添加了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>

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

display：内联块高度

1 个答案: