统一的Html网格

Question

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

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

注意，使用表格会导致：S * Child * SS * Child * SS * Child * S，这不是我想要的。

Answer 1

我认为你的意思是一个网格，其中Child元素尽可能并排出现，然后换行到新的行等，自动适应可用的宽度。它不会是一个矩形网格，除非偶然 - 大多数最后一行的元素少于另一行。

一种简单的方法是使用浮动。假设像

这样的简单标记

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