CODEWITHSUNDEEP
cssalignmentheight
Martin
Martin

Reputation: 367

display: inline-block height

Is there a css-way to make images align to one (bottom) line, with the text aligned to the top? In other words, how to give these <li> elements equal height? min-height is a bad idea 'cause amount of letters is unknown, and overflow:hidden is also cannot be used as users should see the full text.

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

Upvotes: 1

Views: 370

Answers (1)

Paidenwaffle
Paidenwaffle

Reputation: 196

Try without a list and use display: table to make them all the same height. Since we know the image is 200px tall, we're going to absolutely position it to the bottom of the box, with 200px of padding added.

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

And here's the 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/

Upvotes: 1

Related Questions