对齐右下角

Question

我正在尝试将“门票”与 div 元素的右下角对齐。

元素的当前视图

我尝试了很多方法，但没有一个对我有用，有人可以帮忙吗？

这是我当前的代码，

.event {
  display: grid;
  grid-template-columns: 125px 5px 1fr 1fr 125px;
  grid-template-rows: 1;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  width: 80%;
  margin-left: 10%;
  margin-right: 10px;
  height: 125px;
  border-radius: 10px;
  background-color: #1378c6;
  color: white;
}

.event .mainimg {
  grid-area: 0.25;
  width: 125px;
  height: 125px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.event .date {
  grid-area: 0.0833333333;
  width: 100px;
  margin: 0;
  padding: 0;
}

.event .details {
  grid-area: 0.0333333333;
}

.event .details p {
  padding-left: 15px;
}

.event .funnyimage {
  grid-area: 0.0208333333;
  width: 125px;
  height: 125px;
}

.event .ticket {
  grid-area: 0.0166666667;
  color: #2f3336;
}

.event .ticket p {
  background: #ff9b00;
  border-radius: 50%;
  padding: 8px 16px;
  text-align: right;
  position: relative;
  right: 0;
  bottom: 0;
}

<div class="event">
  <img src="images/sample image.svg" class="mainimg">
  <div class="date">
    <p style="margin-top: 20px">DAY</p>
    <p style="font-size: 2em;">XX</p>
    <p>MON</p>
  </div>
  <div class="details">
    <p style="padding-top:15px; font-size: 1.1em">EVENT NAME</p>
    <p>People performing</p>
    <p width="50%">Disc</p>
  </div>
  <div class="funnyimage">
    <img src="images/sample image.svg" style="clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);" width="200px" height="125px;">
  </div>
  <div class="ticket">
    <p title="SOLD OUT">Get Tickets</p>
  </div>
</div>

我尝试过使用相对定位，但它转到右上角并且只改变了文本对齐方式。

这是我的scss

.event {
  display: grid;
  grid-template-columns: 125px 5px 1fr 1fr 125px;
  grid-template-rows: 1;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  width: 80%;
  margin-left: 10%;
  margin-right: 10px;
  height: 125px;
  border-radius: 10px;
  background-color: #1378C6;
  color: white;

  .mainimg {
    grid-area: 1 / 1 / 2 / 2;
    width: 125px;
    height: 125px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }

  .date {
    grid-area: 1 / 2 / 2 / 3;
    width: 100px;
    margin: 0;
    padding: 0;
  }

  .details {
    grid-area: 1 / 3 / 2 / 5;
    p {
      padding-left: 15px;
    }
  }

  .funnyimage {
    grid-area: 1 / 4 / 2 / 6;
    width: 125px;
    height: 125px;
  }

  .ticket {
    grid-area: 1 / 5 / 2 / 6;
    color: #2F3336;
    p {
      background: #FF9B00;
      border-radius: 50%;
      padding: 8px 16px;
      text-align: right;
      position: relative; right: 0; bottom: 0;
    }
  }
}

Answer 1

.event .ticket {
  position: relative;
}

.event .ticket p {
  position: absolute;
}