html - 统一的 HTML 网格

Question

我需要以下 HTML 布局(S - 空格，Child - html 子级，可以是 DIV 或 TABLE。布局应该可以在没有 JavaScript 帮助的情况下调整大小(CSS+HTML 是工具), 它应该支持无限数量的 child 。所有 child 的宽度都相同。

S* child *S* child *S* child *S

请注意，为此使用表将导致:S*Child*SS*Child*SS*Child*S，这不是我要找的。

Answer 1

我假设你的意思是一个网格，其中子元素尽可能并排出现，然后换行等，自动适应可用宽度。它不会是一个矩形网格，除非是偶然的——大多数情况下最后一行的元素比另一行少。

一个简单的方法是使用 float 。假设像

这样的简单标记

<div class=grid>
<div>Child</div>
<div>Child</div>
...
</div>

你可以使用像这样的样式表

.grid div { 
width: 4em;
float: left;
margin-left: 0.2em;
background: #ccc; 
} 

这不会在最后一个 Child 的右侧设置任何空间。如果出于某种原因需要这样的间距，您可以添加

.grid div:last-child { margin-right: 0.2em; }