尝试将文本添加到网格

问题描述

我确定已经问过几次类似的问题，并且我尝试在这里搜索并尝试了一些建议，但是我没有任何运气。而且，我是一个完整的新手。

简而言之，我想在网格中的每个图像下方添加文本，并且每行（3行）中有3张图像。目标是在每个图像的中心下方有一个名字（鸡……。是的，我知道，这都是练习xD）。

.image-container {
  width: 100%;
}

.row-one,.row-two,.row-three {
  width: 90%;
  margin: 10px auto;
  text-align: center;
}

.grid-item {
  width: 30%;
  height: 310px;
  display: inline-block;
  margin: 15px;
  background-size: cover;
  background-position: center;
}

#chicken-one {
  background-image: url(blah blah blah link);
}

<section class="ourchicken-section">
  <h3 class="section-title">Our Chickens</h3>
  <div class="image-container">
    <div class="row-one">
      <div class="grid-item" id="chicken-one"></div>
      <div class="grid-item" id="chicken-two"></div>
      <div class="grid-item" id="chicken-three"></div>
    </div>
  </div>
  <div class="image-container">
    <div class="row-two">
      <div class="grid-item" id="chicken-four"></div>
      <div class="grid-item" id="chicken-five"></div>
      <div class="grid-item" id="chicken-six"></div>
    </div>
  </div>
  <div class="image-container">
    <div class="row-three">
      <div class="grid-item" id="chicken-seven"></div>
      <div class="grid-item" id="chicken-eight"></div>
      <div class="grid-item" id="chicken-nine"></div>
    </div>
  </div>
</section>

以此类推...

我应该在HTML中添加第二个div，然后在每个鸡肉div及其名称下面添加一个<p>元素吗？我尝试过，但是它使图像不对齐。

也许我太新了，需要学习更多。

解决方法

使用::after伪元素并说出white-space: nowrap;在网格下方对齐content。

这可以工作！

.grid-item::after {
    content: " hi there"; //your text here
    white-space: nowrap;
}

,

您正在寻找CSS的content和:after功能。

content会将文本或html代码添加到您的类或ID。

:after将其添加到类或ID的标记之后。值得一提的是，还有一个:before选项。

#chicken-one:after {
 content: "test";
}
#chicken-two:after {
 content: "test";
}
#chicken-three:after {
 content: "test";
}

或者对于所有人，您都可以执行以下操作：

.grid-item:after {
 content: "test";
}