html - 随着页面大小的变化，以固定大小更改列数和行数

Question

假设我有 20 个元素，我想在 html 页面中以行和列(基本上是表格)的形式显示这些元素。如果页面宽度为 1360px，每个元素的宽度为 128px，则将有 10 列和 2 行，如下所示。

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

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

Answer 1

如果你坚持使用 CSS1，你只需要 float 元素。您不必给它们设置宽度，尽管人们倾向于使用网格更好地工作。除非您总是想强制人们以详细信息的方式查看元素，否则您将无法灵活地使用表格显示元素...

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 .