如何在带有标题的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

Flex（CSS3）：https://www.w3schools.com/cssref/css3_pr_flex.asp

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

最佳做法是使用引导程序，为您提供创建响应式界面的可能性，您可以查找一些示例here，修复您遇到的问题不会超过一分钟。