html - 更改具有固定大小的列和行的数量作为页面更改的大小

Question

让我说我有20个项目，我想在html页面中以行和列（基本上在表格中）显示这些项目。如果页面宽度为1360px，每个项目的宽度为128px，那么将有10列和2行，如下所示。

如果页面宽度减少到1024px，那么第一行和第二行将有8列，第三行将有4列，如下所示

基本上我想动态更改给定数量的项目的行数和列数以适应页面，因为每个单元格的高度和宽度是128x128像素。

Answer 1

如果你坚持使用CSS1，你只需要浮动物品。你没有拥有给他们一个设定的宽度，尽管人们确实倾向于使用网格更好地工作。除非您总是希望强迫人们以详细的方式查看项目，否则您无法灵活地使用表格显示项目...

<强> CSS

#files > div
{
 float: left;
 width: 150px;
}

<强>（X）HTML

<div id="files">
<div><span>File01.ext</span></div>
<div><span>File02.ext</span></div>
<div><span>File03.ext</span></div>
<div><span>File04.ext</span></div>
<div><span>File05.ext</span></div>
<div><span>File06.ext</span></div>
<div><span>File07.ext</span></div>
<div><span>File08.ext</span></div>
<div><span>File09.ext</span></div>
<div><span>File10.ext</span></div>
<div><span>File11.ext</span></div>
<div><span>File12.ext</span></div>
<div><span>File13.ext</span></div>
<div><span>File14.ext</span></div>
<div><span>File15.ext</span></div>
<div><span>File16.ext</span></div>
<div><span>File17.ext</span></div>
<div><span>File18.ext</span></div>
<div><span>File19.ext</span></div>
</div>

如果您想确保使用每个像素并且不必担心高兼容性，那么您可以使用CSS3 Flexbox。