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 */
}

请参阅demo。

Answer 2

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

如何在细胞流/包裹时创建一个表而不是使用刚性网格？

2 个答案: