Javascript 如何将图像与网格对齐。（我想制作一个带有图片的产品列表，当单击这些图片时，它们会链接到相应的页面）_Javascript_Html_Css

Javascript 如何将图像与网格对齐。（我想制作一个带有图片的产品列表，当单击这些图片时，它们会链接到相应的页面）

javascript html css

Javascript 如何将图像与网格对齐。（我想制作一个带有图片的产品列表，当单击这些图片时，它们会链接到相应的页面）,javascript,html,css,Javascript,Html,Css,我的任务是从工作中创建产品列表。目前它的格式是excel表格，大约有15页。在第一页上有一组10个图标。因为它在excel上，所以图像可以按您喜欢的方式排列。单击后，图像将显示相应的页面，其中包含产品代码和数据我的任务是将产品列表转换为HTML页面。我希望能够像excel一样有一个网格的图片，使它们看起来像一个产品列表我所尝试的：我曾经尝试过使用div类列和div类行，但这似乎不起作用。我也试过把图片放在一张桌子上，但也没用 <!DOCTYPE html> <html&g

我的任务是从工作中创建产品列表。目前它的格式是excel表格，大约有15页。在第一页上有一组10个图标。因为它在excel上，所以图像可以按您喜欢的方式排列。单击后，图像将显示相应的页面，其中包含产品代码和数据

我的任务是将产品列表转换为HTML页面。我希望能够像excel一样有一个网格的图片，使它们看起来像一个产品列表

我所尝试的：

我曾经尝试过使用div类列和div类行，但这似乎不起作用。我也试过把图片放在一张桌子上，但也没用

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="Neverfail CSS.css">    
</head>
<body>
<h1>NeverFail Product List</h1>
<ul>
  <li><a href="HOME- NF.html">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
<br>


<a href="Water, Casks & Delivery Fee.html">
  <img title="Water, Casks & Delivery Fee" src="Icons/NF_W.png" alt="Water Bottles, Casks & Delivery Fee" style="width:120px;height:120px;border:0">
   <figcaption>Water, Casks & Delivery Fee</figcaption>
</a>


<a href="Wcoolers.html">
  <img src="Icons/wcoolers.png" alt="Water Coolers" style="width:120px;height:120px;border:0">
  <figcaption>Water Coolers</figcaption>
</a>

<a href="cups+acc.png">
  <img src="Icons/cups+acc.png" alt="Cups & Accessories" style="width:120px;height:120px;border:0">
  <figcaption>Cups & Accessories</figcaption>
</a>


<a href="ceramicwell.png">
  <img src="Icons/ceramicwell.png" alt="Ceramic Water Well & Water Only" style="width:80px;height:110px;border:0">
   <figcaption>Ceramic Water Well & Water Only</figcaption>
</a>

<a href="racks.png">
  <img src="Icons/racks.png" alt="Racks" style="width:120px;height:120px;border:0">
   <figcaption>Racks</figcaption>
</a>

<br>

<a href="filters.png">
  <img src="Icons/filters.png" alt="Aqua Vital Filters" style="width:120px;height:120px;border:0">
   <figcaption>Aqua Vital Filters</figcaption>
</a>

<a href="MTF.png">
  <img src="Icons/MTF.png" alt="Mount Franklin" style="width:90px;height:120px;border:0">
</a>

<a href="p/ade.png">
  <img src="Icons/pade.png" alt="Powerade" style="width:120px;height:120px;border:0">
   <figcaption>Powerade</figcaption>
</a>

<a href="Cocacola.png">
  <img src="Icons/Cocacola.png" alt="Coca Cola Range" style="width:180px;height:100px;border:0">
   <figcaption>Coca Cola Range</figcaption>
</a>

<a href="grinders.png">
  <img src="Icons/grinders.png" alt="Grinders Coffee" style="width:120px;height:120px;border:0">
   <figcaption>Grinders Coffee</figcaption>
</a>

<br>

<a href="simplicitea.png">
  <img src="Icons/simplicitea.png" alt="Simplicitea" style="width:120px;height:120px;border:0">
   <figcaption>Simplicitea</figcaption>
</a>

<a href="NTretailrange.png">
  <img src="Icons/NTretailrange.png" alt="Northern Territory Retail Range" style="width:120px;height:120px;border:0">
   <figcaption>Northern Territory Retail Range</figcaption>
</a>

<a href="Promos.png">
  <img src="Icons/Promos.png" alt="Promotions & New Customer Offers" style="width:120px;height:120px;border:0">
   <figcaption>Promotions & New Customer Offers</figcaption>
</a>

<a href="Monster.png">
  <img src="Icons/Monster.png" alt="Monster" style="width:120px;height:120px;border:0">
   <figcaption>Monster</figcaption>
</a>

<br><br><br>


<a href="Icons/Logo background Hor.png" >
  <img src="Icons/Logo background Hor.png" alt="Monster" style="width:1400px;height:150px;border:0">
</a>
</body>
</html>


NeverFail产品列表

我想创建一个动态的可点击图片网格。

看起来CSS flex布局可以帮助您

要使用flex，您需要有一个用于“块”的父容器，因此在所有


编辑：
此外，你可能会认为Rachel Andrew的“新的CSS布局”书可以从一本书中分离出来。这是一篇极好的评论，介绍了HTML布局的来源、现在的位置和发展方向，并提供了非常实用的示例和大量的参考资料。
您考虑过使用Bootstrap吗