CODEWITHSUNDEEP
htmlcssflexbox
Collie-IT Anne K. Frey
Collie-IT Anne K. Frey

Reputation: 875

Align a-tags and spans in a list item on the same hight

I try to align sub elements in a list element.

At the moment it looks like this:

enter image description here

If one of the tags, for e.g. the headline tag gets a row more, all other flowing elements are not aligned anymore.

My goal is to get the aligment like following example:

enter image description here

My code looks like this:

#posts {
  display: inline-block;
}

#posts li {
  list-style: none;
  background-color: #ccc;
  width: 32%;
  float: left;
}

#posts ul {
  display: flex;
  justify-content: space-around;
}

#posts li a {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.excerpt {
  display: flex;
  flex-direction: column;
  align-items: center;
}
<div id="posts">
  <ul>
    <li>
      <a class="title" href="#">Matcha-Tee?</a>
      <span class="excerpt">Teezubereitung 
        <a class="excerpt-more" href="">Mehr</a>
       </span>
    </li>
    <li>
      <a class="title" href="#">Zitronengras?</a>
      <span class="excerpt">Zitronengras ist eine besondere Pflanze
        <a class="excerpt-more" href="">Mehr</a>
       </span>
    </li>
    <li>
      <a class="title" href="#">Wie man heißen Apfel-Zimt-Cider macht</a>
      <span class="excerpt">Apfel-Zimt-Cider
        <a class="excerpt-more" href="#">Mehr</a>
       </span>
    </li>
  </ul>
</div>

How can I achieve this desired alignment?

Upvotes: 0

Views: 38

Answers (1)

Johannes
Johannes

Reputation: 67748

Move the flex settings from excerpt to #posts li and apply margin-top: auto to excerpt in order to move everything from there on to the bottom.

(Note: I applied a min-height to your li elements in this snippet to make them higher in order to clearly see the effect.)

#posts {
  display: inline-block;
}

#posts li {
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style: none;
  background-color: #ccc;
  width: 32%;
  min-height: 300px;
}

#posts ul {
  display: flex;
  justify-content: space-around;
}

#posts li a {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.excerpt {
  margin-top: auto;
}
<div id="posts">
  <ul>
    <li>
      <a class="title" href="#">Matcha-Tee?</a>
      <span class="excerpt">Teezubereitung 
        <a class="excerpt-more" href="">Mehr</a>
       </span>
    </li>
    <li>
      <a class="title" href="#">Zitronengras?</a>
      <span class="excerpt">Zitronengras ist eine besondere Pflanze
        <a class="excerpt-more" href="">Mehr</a>
       </span>
    </li>
    <li>
      <a class="title" href="#">Wie man heißen Apfel-Zimt-Cider macht</a>
      <span class="excerpt">Apfel-Zimt-Cider
        <a class="excerpt-more" href="#">Mehr</a>
       </span>
    </li>
  </ul>
</div>

Upvotes: 1

Related Questions