統一的HTML網格

Question

我需要在HTML中的以下佈局（S - 空格，子頁面 - HTML子頁面，可以是DIV或TABLE，佈局應該可以在沒有JavaScript幫助的情況下調整大小（CSS + HTML是工具）， 。它應該支持孩子們的無限數量的所有兒童都具有相同的寬度

S *兒童* S *兒童* S *兒童* S

注意，使用表，這將導致：S *孩子* SS *孩子* SS *孩子* 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; 
} 

樣式表這不設置任何空間，最後一個孩子的權利。如果需要出於某種原因這樣的間距，可以添加

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