CSS Flexbox Margin Top to Align Items-CodePudding

I'm trying to align the price and the view button in two divs but can't seem to get it right.

I've set display flex on the divs and margin-top : auto on the element but it's not working and since I am using Astra theme, I can't modify the HTML code.

ul {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
}
li {
  display: flex;
  flex-direction: column;
  width: 315px;
}
.button {
  display: block;
}
.astra-shop-summary-wrap {
  display: flex;
  flex-direction: column;
}
.price {
  margin-top: auto;
}

<ul >
  <li >
    <div >
      <a href="#" >
        <img width="300" height="300" src="" >
      </a>
    </div>
    <div >
      <span >Lorem ipsum</span>
      <a href="#">
        <h2 >Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
      </a>
      <span >47.50</span>
      <a href="" >View</a>
    </div>
  </li>
  <li >
    <div >
      <a href="#" >
        <img width="300" height="300" src="" >
      </a>
    </div>
    <div >
      <span >Lorem ipsum</span>
      <a href="#">
        <h2 >Lorem ipsum dolor sit amet </h2>
      </a>
      <span >47.50</span>
      <a href="" >View</a>
    </div>
  </li>
</ul>

CodePudding user response：

The easiest way with the least modification to your code is to just add a dummy h2 placeholder tag. The second way is a more robust solution

ul {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
}
li {
  display: flex;
  flex-direction: column;
  width: 315px;
}
.button {
  display: block;
}
.astra-shop-summary-wrap {
  display: flex;
  flex-direction: column;
}
.price {
  margin-top: auto;
}

<ul >
  <li >
    <div >
      <a href="#" >
        <img width="300" height="300" src="" >
      </a>
    </div>
    <div >
      <span >Lorem ipsum</span>
      <a href="#">
        <h2 >Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
      </a>
      <span >47.50</span>
      <a href="" >View</a>
    </div>
  </li>
  <li >
    <div >
      <a href="#" >
        <img width="300" height="300" src="" >
      </a>
    </div>
    <div >
      <span >Lorem ipsum</span>
      <a href="#">
        <h2 >Lorem ipsum dolor sit amet</h2></a>
        <h2 style="margin:0">&nbsp;</h2>
      <span >47.50</span>
      <a href="" >View</a>
    </div>
  </li>
</ul>

ul {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
}
li {
  display: flex;
  flex-direction: column;
  width: 315px;
}
.button {
  display: block;
}
.astra-shop-summary-wrap {
  display: flex;
  flex-direction: column;
}
.price {
  margin-top: auto;
}

#x{
display:flex;
flex-direction:row;}

.y{
width:315px;
margin-left:40px;}

<ul >
  <li >
    <div >
      <a href="#" >
        <img width="300" height="300" src="" >
      </a>
    </div>
    <div >
      <span >Lorem ipsum</span>
      <a href="#">
        <h2 >Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
      </a>
     
    </div>
  </li>
  <li >
    <div >
      <a href="#" >
        <img width="300" height="300" src="" >
      </a>
    </div>
    <div >
      <span >Lorem ipsum</span>
      <a href="#">
        <h2 >Lorem ipsum dolor sit amet</h2></a>       
     
    </div>
  </li>
</ul>

<div id = 'x'>
   <div class = 'y'>
      <span >47.50</span>
      <a href="" >View</a>
   </div>
   <div class = 'z'>
      <span >47.50</span>
      <a href="" >View</a>
      </div>
</div>

CodePudding user response：

EDITED:

ul {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
}
li {
  display: flex;
  flex-direction: column;
  width: 315px;
}
.button {
  display: initial;
  position: absolute;
  top: 0;
  right: 20px;
}
.astra-shop-summary-wrap {
  display: initial;
  position: relative;
  padding-top:10px
}
.price {
  margin-top: auto;
  position: absolute;
  top: 0;
  left: 2px;
}