유니폼 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; }