반응 섬네일 격자 너비에

Question

너비가 변경되면 자동으로 크기를 조정하는 반응 형 섬네일 그리드를 만들기가 아주 쉽습니다.

이

<ol> 
<li><img scr=""/></li> 
<li><img scr=""/></li> 
</ol> 

기타가 너무 썸네일 그리드를 만들 수있는 가장 좋은 방법은 무엇입니까 사업부와 IMG 구조를 사용하지만 난 어떤 사용하여 정렬 된 목록 구조를 어떻게 만들어 지는지 썸네일 그리드 다양한 방법을 보았는가?

예를 들어 브라우저의 최대 너비가 750px 인 콘텐츠를 중심으로하고 공간의 100 %를 채우는 5 개의 정사각형 축소판을 배치하고 너비가 변경되면 자동으로 크기를 조정하려고합니다. 또한 나는 공간을 추가하거나 공간을 제거하고 나중에 공간을 제거하기를 원하지만 콘텐츠 영역의 너비를 100 %로 유지하고 내용 텍스트 사이의 위쪽과 아래쪽에 공간을 추가하려고합니다. 여기

당신이 된 DIV 또는 정렬되지 않은 또는 정렬 된 목록을 사용하는지 여부는 중요하지 않습니다 Fiddle

Answer 1

입니다. 나는 그것이 의미 론적으로 나를 위해 느끼는 그러한 경우를 위해 정렬되지 않은 목록을 선택하는 경향이있다. 그러나 레이아웃 매직은 스타일 시트에서 발생합니다.

나는 목록을 사용하는 이유는 자주

• 항목
  • 내용
    • 목록의 계층 구조를 얻을 편리이다

따라서 목록 항목의 크기와 관련된 컨테이너 목록 (귀하의 경우 20 %)을 사용할 수 있으며 각 목록 항목의 콘텐츠는 목록 항목 부모와 관련하여 배치 할 수 있습니다. 목록 내에서 목록 항목을 플로팅 할 수 있습니다 (따라서 float : after 가상 요소를 삭제하는 것을 잊지 마세요). 또는 display를 inline-block으로 설정하십시오. 그러면 목록 내의 LI 태그 사이의 공백을 제거해야합니다. 간격을 막으십시오).

팁 : 상대 수직 패딩은 항상 관련하여 계산되기 때문에 부모 요소의 폭 (안 높이!), 당신이 모든 목록 항목을 고정 너비/높이 비율을 제공 할 수 있습니다. 축소판을 정사각형으로 만들려면 목록 항목 패딩 하단을 width: 20%과 동일한 값으로 설정할 수 있습니다. 이미지 요소로 작업하지 않고 배경 이미지로 작업하는 경우 특히 유용합니다. 단점은 모든 항목 내용이 절대 항목 내에 있어야한다는 것입니다. http://jsfiddle.net/Lmmdj2yq/6/

만큼 목록 항목 사이의 간격이뿐만 아니라 목록 컨테이너에 상대적하기위한 것입니다, 그것은 수학의 조금은 다음과 같습니다

나는 그에 따라 바이올린을 변경했습니다. 예 : 이 중 012 %는 updated fiddle입니다. 5 개의 아이템은 그들 사이에 5 %의 4 개의 거터를 가지고 있습니다. 따라서 margin: 0 5% 5% 0 및 width: 16% (= (100 % - 5 % * 4 번 거터)/5 개 항목)을 설정하십시오. 각 목록 항목의 : nth-child (5n)는 마진 (margin)을 가져야 만합니다. 즉, 제대로 작동하려면 0으로 설정해야합니다.

고정 거터를 갖고 싶으면 더 까다로워집니다. 나는 보통 fiddle과 같은 것을하고 마크 업을 추가해야 할 수도 있습니다 (링크 태그를 추가했습니다).수평 간격은 목록 항목의 패딩 (항목은 box-sizing: border-box;입니다), 여백을 통한 수직 간격을 통해 정의됩니다. 목록 컨테이너의 양면에는 음수 여백이 있습니다. 스타일을 확인하십시오.