我的任务是根据工作创建产品列表。目前是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>
我想创建一个动态的可点击图片网格。
最佳答案
看起来 CSS flex 布局可以帮助您。
要使用 flex，您需要为您的“ block ”提供一个父容器，因此放置一个 <div>在你身边 <a..> block 并分配一个 display: flex;到那个分区。这应该足以让您感到非常满意。
如果您需要有关如何调整 flex 的更多信息，请查看:https://www.w3schools.com/css/css3_flexbox.asp
编辑: 此外，您还可以考虑 A Book Apart 上的 Rachel Andrew 的“The New CSS Layout”一书。这是对 HTML 布局的来源、现在和发展方向的出色回顾，提供了非常实用的示例和大量引用。
关于javascript - 如何将图像对齐到网格。 (我想用图片制作一个产品列表，点击它们会链接到相应的页面)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54015810/