Блог

Я пытаюсь создать веб-сайт, и я хочу создать страницу с этим макетом:

 ------------------------------------------
|    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’, но я не знаю, как это сделать другим способом.

Некоторая помощь была бы отличной! Спасибо

Почему вы не используете CSS grid?

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.