페이지 크기가 조정되는 동안 축소판 맞추기

Question

웹 페이지에 축소판 (~ 200px 너비 각각)을 표시한다고 가정합니다. 중간 크기 화면 (예 : 15 ")에서는 5 개의 축소판을 연속으로 표시 할 수 있습니다.

이제 브라우저 창 크기를 조정하여 5 개의 축소판이 페이지 너비에 맞지 않으면 어떻게합니까? 페이지에 맞게 자동으로 변경됩니다.

예를 들어, 사이에 공백이있는 축소판 5 개가 ~ 2000 픽셀을 차지한다고 가정합니다. 이제 페이지의 너비가 < 2000 픽셀이 되긴하지만 1600 픽셀을 초과하면됩니다. 행에 4 개의 미리보기 이미지를 표시하는 것과 같습니다.

해당 동작을 수행하기 위해 HTML/CSS 마크 업을 사용해야합니까?

Answer 1

내가 한 번 누군가에게 미디어 쿼리를 설명하기 위해 fiddle했다. 비슷한 디자인을 사용할 수 있습니다 만, 일반적으로 float:left 또는 display:inline-block 요소에 훨씬 더 간단하고 브라우저가 나머지 부분을 처리하도록합니다.

DEMO

Answer 2

한 가지 방법은 반응 형 레이아웃을 사용하는 것입니다. Twitter Bootstrap은 기본적으로 같은 것을 제공합니다.

또 다른 방법은 @media 태그를 사용하는 것입니다. http://www.w3schools.com/css/css_mediatypes.asp을 참조하십시오. 여기에 다음과 같은 함수를 만들어야합니다. mediacheck을 사용하여 화면 크기를 가져온 다음 @media을 사용하여 임계 값을 설정합니다.

Answer 3

이에 대한 float property을 사용할 수 있습니다 : 그들은 부모의 폭에 맞지 않는 경우

float: left; 

부동 요소 바꿈됩니다.

Example (페이지 크기를 조정하려고는)