如何在网格中布置图像？

Posted 2023-02-16

【中文标题】如何在网格中布置图像？

【英文标题】：How can I lay images out in a grid?

【发布时间】：2010-09-08 09:49:24

【问题描述】：

我正在尝试使用 XSLT 和 XSL-FO 制作带有按网格排列的标题的照片。照片 URL 和标题是使用针对 SQL Server 数据库的 FOR XML 查询生成的，返回的照片数量因工作表而异。我想把照片分成四列，从左到右和从上到下填充网格。在 html 中，我会通过将每张照片和标题放入 div 并使用“float:left”使它们流入网格来做到这一点。有没有使用 XSL-FO 的同样优雅的方法？

【参考方案1】：

最后，我为此使用了一个包含一行和四个单元格的表格。在每一个中，我根据需要选择了 position() mod 4 等于 0、1、2 或 3 的源元素，然后确保照片和标题始终具有相同的高度，以便行正确排列。

【参考方案2】：

为了让生活简单，我通常会为此设置一张桌子，它非常简单，并且可以确保事情得到正确布置。如果你想像在 HTML 中那样做，那么你应该布局块容器元素。

无论您决定如何做，我始终建议您使用ZVON Reference 网站。很好地查找元素和可用属性，虽然它们的 XSL-FO 并没有包含太多的解释方式，但每个页面的深度链接都指向标准文档。