html - 如何在单元格流动/换行而不是使用刚性网格中创建表格？

Question

我在创建我想要的网站布局时遇到问题。我在网页设计方面没有太多经验，我唯一拥有的软件是 FrontPage，它似乎并不能满足我的要求。

我正在尝试创建一个包含许多“单元格”的页面，每个单元格都包含顶部的图像，下方居中的文本。我希望每个单元格都具有固定的宽度，并且我希望单元格遵循正常的“流”，彼此并排放置（例如，像内联图像那样），如果没有足够的单元格，则将这些单元格包裹起来宽度以将它们全部放在一行上（再次，就像内联图像一样）。

首先想到的是表格，但表格具有行和列的刚性结构，而不是流动和环绕。

Answer 1

HTML：

<div class="cell"><img src="img1.png" ...><br>Capture 1</div>
<div class="cell"><img src="img2.png" ...><br>Capture 2</div>
<div class="cell"><img src="img3.png" ...><br>Capture 3</div>
<!-- and so on -->

CSS：

.cell {text-align:center;
       width:200px; /* or whatever you want */
       float:left;
       /* add margin, padding, border style if you wish */
}

见演示。

Answer 2

我认为，在历史的这一点上，实现这种外观的习惯方法是 ul（无序列表）。看看Galleria 插件的演示。其中每一个都有一组缩略图，几乎完全按照您的描述呈现（您必须在下面添加文本）。