我在创建我想要的网站布局时遇到问题。我在网页设计方面没有太多经验,我唯一拥有的软件是 FrontPage,它似乎并不能满足我的要求。
我正在尝试创建一个包含许多“单元格”的页面,每个单元格都包含顶部的图像,下方居中的文本。我希望每个单元格都具有固定的宽度,并且我希望单元格遵循正常的“流”,彼此并排放置(例如,像内联图像那样),如果没有足够的单元格,则将这些单元格包裹起来宽度以将它们全部放在一行上(再次,就像内联图像一样)。
首先想到的是表格,但表格具有行和列的刚性结构,而不是流动和环绕。
我在创建我想要的网站布局时遇到问题。我在网页设计方面没有太多经验,我唯一拥有的软件是 FrontPage,它似乎并不能满足我的要求。
我正在尝试创建一个包含许多“单元格”的页面,每个单元格都包含顶部的图像,下方居中的文本。我希望每个单元格都具有固定的宽度,并且我希望单元格遵循正常的“流”,彼此并排放置(例如,像内联图像那样),如果没有足够的单元格,则将这些单元格包裹起来宽度以将它们全部放在一行上(再次,就像内联图像一样)。
首先想到的是表格,但表格具有行和列的刚性结构,而不是流动和环绕。
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 */
}
见演示。
我认为,在历史的这一点上,实现这种外观的习惯方法是 ul(无序列表)。看看Galleria 插件的演示。其中每一个都有一组缩略图,几乎完全按照您的描述呈现(您必须在下面添加文本)。