html - 如何在 2 行中显示 3 个带有字幕的图像？

Question

如何在不使用任何库的情况下编写 HTML 代码以在 2 行中显示 3 个图像和标题？

下面的代码显示了下图中的网站。

<div class="container">

<h2>Project 1: Image Filtering and Hybrid Images</h2>


<div style="float: right; padding: 10px">
<img src="../data/cat.bmp"  width="200px" height="100px"/>
<p style="font-size: 14px">   hybrid image.</p>
</div>

<div style="float: right; padding: 10px">
<img src="../data/cat.bmp" width="100px" height="100px"/>
<p style="font-size: 14px">   hybrid image.</p>
<img src="../data/cat.bmp" width="100px" height="100px" />
<p style="font-size: 14px">   hybrid image.</p>
</div>
</div>

但是如何修改上面的代码才能显示下图的结果呢？

Answer 1

您需要开始考虑盒子。使用盒子作为内容的容器。我可以在您的布局中看到以下框。

您还应该开始添加类而不是使用内联 CSS，因为如果您想进行任何更改，类更易于阅读和维护。

如何插入 css:https://www.w3schools.com/css/css_howto.asp

弹性(CSS3):https://www.w3schools.com/cssref/css3_pr_flex.asp

.image-container {
  float: right;
  display: flex;
  flex-wrap: wrap;
  max-width: 300px;
}

.cat-container {
  flex: 1 1 50%;
  padding: 0px 1rem;
  box-sizing: border-box;
}

img.cat {
  width: 100%;
  height: auto;
}

.caption {
  font-size: 14px;
  text-align: center;
}

<h2>Project 1: Image Filtering and Hybrid Images</h2>

<div class="image-container">

  <div class="cat-container">
    <img class="cat" src="https://www.communitycatspodcast.com/wp-content/uploads/2014/11/BarnCat.jpg" />
    <p class="caption">hybrid image.</p>  
  </div>
  
  <div class="cat-container">
    <img class="cat" src="https://www.communitycatspodcast.com/wp-content/uploads/2014/11/BarnCat.jpg" />
    <p class="caption">hybrid image.</p>  
  </div>

  <div class="cat-container">
    <img class="cat" src="https://www.communitycatspodcast.com/wp-content/uploads/2014/11/BarnCat.jpg" />
    <p class="caption">hybrid image.</p>  
  </div>
  
</div>


<p>Bla, bla, bla, bla.</p>

<p>Bla, bla, bla, bla.</p>

<p>Yada, yada, yada.</p>

<p>Bla, bla, bla, bla.</p>