时间戳

首页 > 解决方案 > 尝试将文本添加到网格

html - 尝试将文本添加到网格

问题描述

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

简而言之，我想在网格中的每个图像下方添加文本，并且每行（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，然后<p>在每个鸡 div 及其名称下方添加一个元素？我试过了，但它会使图像不对齐。

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

标签： htmlcssflexboxcss-gridfigure

解决方案

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

这会奏效！

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

推荐阅读