html - 统一 Html 网格

Question

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

S*儿童*S*儿童*S*儿童*S

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

Answer 1

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

一个简单的方法是使用浮动。假设简单的标记如

<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; }