브라우져 줄이면 요소 개행+가운데 정렬

* 개요

게시물 박스가 브라우져 줄이면 알아서 개행.

박스는 좌측정렬하여 순서대로 배열

그 전체 모양은 가운데 정렬

 

상자모양 (게시물 목록) div 5개 배치 (div31,32,33,34,35 라고 부름)

그 위에 div2 를 씌움

그 위에 div1 을 한번 더 씌움

 

div1과 div2 는 height : 0 상태로 생성됨.

 

* div31~35 는 좌측으로 1열로 늘어서지만 float:left; 를 주면 위처럼 

1 2 

3 4

5

모양으로 배열됨.

 

* div2에 display:inline-block; 을 붙이면 내용에 맞게 height 가 증가하고, div1 도 함께 증가함. (div1는 block인데?)

 

* div1 에 text-align:center 를 주면

div31~35 가 가운데 정렬함. 

div2 에 width (또는 max-width) 로 제한해주면

div31~35 는 좌측으로 쌓여서 정렬되지만, 전체적(div2)으로는 가운데로 정렬됨.