具有列和绝对图像的布局

Question

我正在尝试制作一个网站，我想使用该布局制作一个页面：

------------------------------------------
|    A title     |                       |
|     There      |  A non square         |
|                |------     image       |
|    A long description |        there   |
|            By there   |                |
|                       |  Some text     |
|                       |  over the img  |
|                       |                |
------------------------------------------

我正在使用 vuejs 和 vuetify，我尝试过这样做：

<div style="position:absolute; top:0px; right:0px; width="60%"; background-image: url('/Background1.png');> </div>
<v-row>
  <v-col cols=5>Title there </v-col>
  <v-col cols=7><v-col>
<v-row>
<v-row>
  <v-col cols=8>A long description by there</v-col>
  <v-col cols=4>Some text over the image </v-col>
<v-row>

这适用于我的分辨率 1920*1080，但是当我缩小窗口时，它会出错，因为第二行的位置与图像的“边缘”不匹配。

我知道这是因为我使用了 'position:absolute' 但我不知道如何以其他方式进行。

一些帮助会很棒！谢谢

Answer 1

为什么不使用 CSS 网格？

HTML：

<div class="container">
  <div class="title">Title</div>
  <div class="longDescription">Long description</div>
  <div class="img">Non-square image</div>
  <div class="textOverImg">Text over image</div>
</div>

CSS：

/* STYLING */

.container > div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.title {
  background-color: blue;
  color: white;
}

.longDescription {
  background-color: red;
  color: white;
}

.img {
  background-color: yellow;
}

.textOverImg {
  background-color: green;
  color: white;
}

/* CSS GRID */

.container {
  display: grid;
  grid-template-columns: 40vw 10vw 40vw;
  grid-template-rows: repeat(10, 20px);
}

.title {
  grid-column: 1;
  grid-row: 1 / span 3;
}

.longDescription {
  grid-column: 1 / span 2;
  grid-row: 4 / span 7;
  z-index: 10;
}

.img {
  grid-column: 2 / span 2;
  grid-row: 1 / span 5;
}

.textOverImg {
  grid-column: 3;
  grid-row: 5 / span 6;
}

你可以在这里看到效果：https://codepen.io/Sa1m0n/pen/jOqZPOy。