如何将图像和文本放入框内 (html/css)？

Question

目前我有 this（除了只有 3 个相邻的盒子）

但是，我试图在每个框中放一个小的 header、一张图片和一个小的描述。我该怎么做呢？ Example image 代码段下方：

.block {
    display: inline-block;
    width: 200px;
    height: 200px;
    background-color: lightgray;
}
.container  {
    text-align: center;
}

<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

Answer 1

您可以将它们作为元素添加到 div:

.block {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: lightgray;
}

.container {
  text-align: center;
}

.block img {
 width: 100px;
 height: 100px;
}

<div class="container">
  <div class="block">
    <h3>Title 1</h3>
    <img src="https://www.scania.org/wp-content/uploads/2018/10/article-10-2.jpg">
    <p>Some text</p>
  </div>
  <div class="block">
    <h3>Title 2</h3>
    <img src="https://avatarfiles.alphacoders.com/121/121594.jpg">
    <p>Some text</p>
  </div>
  <div class="block">
   <h3>Title 2</h3>
    <img src="https://i.imgur.com/8G3NXcW.gif">
    <p>Some text</p>
  </div>
</div>

Answer 2

您可以将它们作为元素放入 "block" div 中。例如像这样：

<div class="block">
<h1>Hello</h1>
<img src="asd">
<p>Some text, lorem etc.</p>
</div>


<div class="block">
<h1>Hello again</h1>
<img src="asd">
<p>Some epic text, lorem etc.</p>
</div>


<div class="block">
<h1>Hello hello</h1>
<img src="asd">
<p>Some even more exciting text, lorem etc.</p>
</div>

Answer 3

HTML部分

<div class="container">
  <div class="block">
    <div class="header">Title</div>
    <div class="image"><img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" alt=""></div>
    <div class="description">description</div>

  </div>
  <div class="block">
     <div class="header">Title</div>
    <div class="image"><img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" alt=""></div>
    <div class="description">description</div>
  </div>
  <div class="block">
     <div class="header">Title</div>
    <div class="image"><img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" alt=""></div>
    <div class="description">description</div>
  </div>
  <div class="block">
     <div class="header">Title</div>
    <div class="image"><img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" alt=""></div>
    <div class="description">description</div>
  </div>

</div>

CSS部分

.header {
  width:100%;
  float:left;
}

.image img {
  width:100%;
  float:left;
}



.description{
  width:100%;
  float:left;
}

如何将图像和文本放入框内 (html/css)？

How to put images and text inside boxes (html/css)?

html

css

css-position