时间戳

首页 > 解决方案 > CSS 网格模板在部分周围使用 4 个图像，p 标签位于中心

html - CSS 网格模板在部分周围使用 4 个图像，p 标签位于中心

问题描述

我想创建的布局我想创建一个带有 4 个图像和一个段落的网格模板。我希望他们像。“img_1 img_2 img_2” “img_1 p-tag img_4” “img_3 img_3 img_4”。我是这样编码的，它没有用，我也试过这个。

下面的html代码

  <section class="images">
    <div id="img-div" class="img-1">
      <img src="https://media.gettyimages.com/photos/tschechow-anton-2901186015071904-schriftsteller-russland-halbportrait-picture-id541789205?s=2048x2048"/>
    </div>
    <div id="img-div" class="img-2">
      <img src=" https://media.gettyimages.com/photos/anton-chekhov-in-his-study-in-yalta-18951900-found-in-the-collection-picture-id600058295?s=2048x2048">
    </div>
    <div id="img-div" class="img-3">
      <img src="https://media.gettyimages.com/photos/anton-chekhov-studying-book-with-actors-of-the-moscow-state-art-in-picture-id171086002?s=2048x2048"/>
    </div>
    <div id="img-div" class="img-4">
      <img src="https://media.gettyimages.com/photos/anton-pavlovich-chekhov-2901186015071904-writer-dramatist-russia-picture-id541537841?s=2048x2048"/>
    </div>
   <div class="quote">
    <q>Knowledge is of no value unless you put it into practice.</q>
  </div>
  </section>

CSS代码

main {
  width: 100%;
  height: 100%;
}
img {
  width: 100%;
  height: 100%;
}
section {
  width: 80%;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 1rem;
}
#img-div {
  width: auto;
  height: auto;
} 
.images:nth-child(1){
  grid-area: 1/1/3/2;
}
.images:nth-child(2){
  grid-area: 1/2/2/4;
}
.images:nth-child(3){
  grid-column: 3/1/4/3;
}
.images:nth-child(4){
  grid-column: 2/3/4/4;
}
.quote {
  grid-area: 2/2/3/3;
}

标签： htmlcsscss-grid

解决方案

您的选择器不起作用，并且您为图像 3 和 4 编写了 grid-column 而不是 grid-area。

main {
  width: 100%;
  height: 100%;
}

img {
  width: 100%;
  height: 100%;
}

section {
  width: 80%;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 1rem;
}

.img-1 {
  grid-area: 1/1/3/2;
}

.img-2 {
  grid-area: 1/2/2/4;
}

.img-3 {
  grid-area: 3/1/4/3;
}

.img-4 {
  grid-area: 2/3/4/4;
}

.quote {
  grid-area: 2/2/3/3;
}
<section class="images">
  <div id="img-div" class="img-1">
    <img src="https://media.gettyimages.com/photos/tschechow-anton-2901186015071904-schriftsteller-russland-halbportrait-picture-id541789205?s=2048x2048" />
  </div>
  <div id="img-div" class="img-2">
    <img src=" https://media.gettyimages.com/photos/anton-chekhov-in-his-study-in-yalta-18951900-found-in-the-collection-picture-id600058295?s=2048x2048" />
  </div>
  <div id="img-div" class="img-3">
    <img src="https://media.gettyimages.com/photos/anton-chekhov-studying-book-with-actors-of-the-moscow-state-art-in-picture-id171086002?s=2048x2048" />
  </div>
  <div id="img-div" class="img-4">
    <img src="https://media.gettyimages.com/photos/anton-pavlovich-chekhov-2901186015071904-writer-dramatist-russia-picture-id541537841?s=2048x2048" />
  </div>
  <div class="quote">
    <q>Knowledge is of no value unless you put it into practice.</q>
  </div>
</section>

推荐阅读