使用 flex 在 CSS 网格项内定位图像、文本和链接

Question

我正在创建一个 html/css 布局，需要如下所示：

（https://i.sstatic.net/Z49ekM8m.png）

每个框都是一个链接。为了将活动链接区域扩展到整个框，并让文本定位在每个网格项的底部，我将每个链接设置为弹性框。因此，如果有意义的话，我目前有一个网格布局，每个网格项内都有一个弹性框。

到目前为止，我已经能够做到这一点：

（https://i.sstatic.net/itbwRXvj.png）

但是，当我尝试将图像放入“讲师指导的培训”框中时，我遇到了各种各样的问题。如何在不破坏其他设计的情况下添加图像？

我尝试将图像放入弹性框的 div 中，但它只会让整个事情变得更加糟糕。

这是“工作”代码，在我尝试添加图像之前：

.vtx_gc_001 {
  display: grid;
  height: 450px;
  /*padding: 10px;*/
  gap: 30px;
  background-color: #f1f1f1;
}

.vtx_gi {
  border-radius: 50px;
  display: flex;
  width: 100%;
  height: 100%;
}

#vtxgi1 {
  grid-column: 1 / span 2;
  background-color: #00943c;
}

#vtxgi2 {
  grid-row: 2 / 4;
  background-color: #008299;
  border-radius: 0px;
  border-bottom-right-radius: 50px;
}

#vtxgi3 {
  grid-column: 2;
  grid-row: 2;
  background-color: #BEC1C3;
}

#vtxgi4 {
  grid-column: 2;
  grid-row: 3;
  background-color: #00609C;
}

#vtxgi5 {
  grid-column: 1 /span 2;
  grid-row: 4;
  background-color: #F3CF40;
}

#vtx_a1,
#vtx_a2,
#vtx_a3,
#vtx_a4,
#vtx_a5 {
  display: flex;
  align-self: last baseline;
}

.vtx_grid_a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}

<div class="vtx_gc_001" style="grid-template-columns: auto auto;grid-template-rows: auto auto auto auto;">
  <div class="vtx_gi" id="vtxgi1"><a href="https://vertexinc.cventevents.com/event/474a32aa-8375-4d1d-9462-8634c8d2d583/websitePage:012cdbf9-f1e0-4f63-a3c4-87721ee58474?RefId=us-home-cm-university-attendee&rt=8eGNBUYg8Ey12a5hJATG8A" class="vtx_grid_a" id="vtx_a1" style="padding:20px;padding-left:30px;color:white;font-weight:bold;font-size:20px;">Exchange 2024</a></div>
  <div class="vtx_gi" id="vtxgi2"><a href="https://university.vertexinc.com/pages/76/instructor-led-training-schedule" class="vtx_grid_a" id="vtx_a2" style="padding:20px;padding-left:40px;text-align:center;color:white;font-weight:bold;font-size:20px;">Instructor Led Training</a></div>
  <div class="vtx_gi" id="vtxgi3"><a href="https://university.vertexinc.com/learn/catalog" class="vtx_grid_a" id="vtx_a3" style="padding:20px;padding-left:30px;text-align:center;color:white;font-weight:bold;font-size:20px;">Course Catalog</a></div>
  <div class="vtx_gi" id="vtxgi4"><a href="https://university.vertexinc.com/pages/90/partners" id="vtx_a4" class="vtx_grid_a" style="padding:20px;padding-left:30px;text-align:center;color:white;font-weight:bold;font-size:20px;">Partner Resources</a></div>
  <div class="vtx_gi" id="vtxgi5"><a href="https://university.vertexinc.com/pages/104/get-certified" class="vtx_grid_a" id="vtx_a5" style="padding:20px;padding-left:30px;text-align:center;color:white;font-weight:bold;font-size:20px;">Get Certified!</a></div>
</div>

Answer 1

嗯，这个基础有点不稳定。我将通过使用

position: asbsolute

作为

img

添加一些内容，而不会干扰流程。这意味着它的父级是

position: relative

并且标题需要它位于图像上方。

.vtx_gc_001 {
  display: grid;
  height: 450px;
  /*padding: 10px;*/
  gap: 30px;
  background-color: #f1f1f1;
}

.vtx_gi {
  border-radius: 50px;
  display: flex;
  width: 100%;
  height: 100%;
}

#vtxgi1 {
  grid-column: 1 / span 2;
  background-color: #00943c;
}

#vtxgi2 {
  grid-row: 2 / 4;
  background-color: #008299;
  border-radius: 0px;
  border-bottom-right-radius: 50px;
}

#vtxgi3 {
  grid-column: 2;
  grid-row: 2;
  background-color: #BEC1C3;
}

#vtxgi4 {
  grid-column: 2;
  grid-row: 3;
  background-color: #00609C;
}

#vtxgi5 {
  grid-column: 1 /span 2;
  grid-row: 4;
  background-color: #F3CF40;
}

#vtx_a1,
#vtx_a2,
#vtx_a3,
#vtx_a4,
#vtx_a5 {
  display: flex;
  align-self: last baseline;
}

.vtx_grid_a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}

.vtx_gi {
  position: relative;
  overflow: hidden;
}

.vtx_gi .image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  bottom: 0;
  right: 0;
  height: 100%;
}

<div class="vtx_gc_001" style="grid-template-columns: auto auto;grid-template-rows: auto auto auto auto;">

  <div class="vtx_gi" id="vtxgi1"><a href="https://vertexinc.cventevents.com/event/474a32aa-8375-4d1d-9462-8634c8d2d583/websitePage:012cdbf9-f1e0-4f63-a3c4-87721ee58474?RefId=us-home-cm-university-attendee&rt=8eGNBUYg8Ey12a5hJATG8A" class="vtx_grid_a" id="vtx_a1" style="padding:20px;padding-left:30px;color:white;font-weight:bold;font-size:20px;">Exchange 2024</a></div>

  <div class="vtx_gi" id="vtxgi2">
    <img class="image" src="https://picsum.photos/100" alt="Image">
    <a href="https://university.vertexinc.com/pages/76/instructor-led-training-schedule" class="vtx_grid_a" id="vtx_a2" style="padding:20px;padding-left:40px;text-align:center;color:white;font-weight:bold;font-size:20px; position: relative;">Instructor Led Training</a></div>

  <div class="vtx_gi" id="vtxgi3"><a href="https://university.vertexinc.com/learn/catalog" class="vtx_grid_a" id="vtx_a3" style="padding:20px;padding-left:30px;text-align:center;color:white;font-weight:bold;font-size:20px;">Course Catalog</a></div>

  <div class="vtx_gi" id="vtxgi4"><a href="https://university.vertexinc.com/pages/90/partners" id="vtx_a4" class="vtx_grid_a" style="padding:20px;padding-left:30px;text-align:center;color:white;font-weight:bold;font-size:20px;">Partner Resources</a></div>

  <div class="vtx_gi" id="vtxgi5"><a href="https://university.vertexinc.com/pages/104/get-certified" class="vtx_grid_a" id="vtx_a5" style="padding:20px;padding-left:30px;text-align:center;color:white;font-weight:bold;font-size:20px;">Get Certified!</a></div>

</div>