如何将文本置于图像列下？

Question

我如何使它，使文字在哪里，它只是空白和文字，而不是在图片下面？下面是代码在站点上所做工作的图片：https://i.stack.imgur.com/PAwLN.jpg

以下是图像网格设置的当前CSS：

.column{ float: left; width: 33.3%; padding:5px;} .column img{height: 370px; width:300px}

Answer 1

你可以这样做你的代码，

​

.img-container{
  display: flex;
  justify-content: space-evenly;
}

.img-card img{
  border: solid black 1px;
  margin: 10px;
  width: 200px;
}

.img-card p{
  text-align: center;
  margin-top: -10px;
}

<html>
  <body>
  <div class="img-container">
    <div class="img-card">
      <img src="https://cdn2.hubspot.net/hub/181021/file-338034070-jpg/images/real_world_examples.jpg">
      <p>Message</p>
    </div>
    <div class="img-card">
      <img src="https://cdn2.hubspot.net/hub/181021/file-338034070-jpg/images/real_world_examples.jpg">
      <p>Message</p>
    </div>
    <div class="img-card">
      <img src="https://cdn2.hubspot.net/hub/181021/file-338034070-jpg/images/real_world_examples.jpg">
       <p>Message</p>
    </div>
  </div>
  </body>
</html>

​

Answer 2

我试着理解你的意思，但如果是关于布局的，你最好了解一下css grid https://www.w3schools.com/css/css_grid.asp https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

​

.container{
  display: grid;
  grid-template-columns: auto auto auto;
}

.image > img{
  width: 200px;
  height: 150px;
}

<div class="container">
    <div class="image">
      <img src="https://cdn2.hubspot.net/hub/181021/file-338034070-jpg/images/real_world_examples.jpg" alt="">
    </div>
    <div class="image">
      <img src="https://cdn2.hubspot.net/hub/181021/file-338034070-jpg/images/real_world_examples.jpg" alt="">
    </div>
    <div class="image">
      <img src="https://cdn2.hubspot.net/hub/181021/file-338034070-jpg/images/real_world_examples.jpg" alt="">
    </div>
    <div class="image">
      <img src="https://cdn2.hubspot.net/hub/181021/file-338034070-jpg/images/real_world_examples.jpg" alt="">
    </div>
    <div class="image">
      <img src="https://cdn2.hubspot.net/hub/181021/file-338034070-jpg/images/real_world_examples.jpg" alt="">
    </div>
    <div class="image">
      <img src="https://cdn2.hubspot.net/hub/181021/file-338034070-jpg/images/real_world_examples.jpg" alt="">
    </div>
  </div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum molestiae quasi incidunt esse quisquam reiciendis error cum ea quos doloremque.</div>

​