我接到了一个任务，从工作中创建一个产品列表。目前，它采用大约 15 页的 excel 表格式。在第一页上，有一组 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>
我会创建一个动态的可点击图片网格。
看起来CSS flex布局可以帮助你。
要使用 flex，您需要为"块"提供一个父容器，因此请在所有<a..>块周围放置一个<div>，并为该div 分配一个display: flex;。这应该足以给你一些非常令人满意的东西。
如果您需要有关如何调整 flex 的更多信息，请查看：https://www.w3schools.com/css/css3_flexbox.asp
编辑：另外，你可以考虑Rachel Andrew的"The New CSS Layout"一书，可以从A Book Apart获得。这是对HTML布局的来源，现在的位置以及发展方向的出色评论，其中包含非常实用的示例和大量参考资料。