간격/패딩없이 그림 그리드를 만드는 방법은 무엇입니까? (WordPress)

Question

나는 WordPress 사이트에서 일하고 있는데, 아무리 노력해도 문제가 해결되지 않았다. 나는 이것 (http://www.elegantthemes.com/gallery/origin/)과 비슷한 격자를 원한다. 그러나 이것보다 더 많이 : (http://themeforest.net/item/hercules-portfolio-business-wordpress-theme/full_screen_preview/5124743). 헤클 (hercules) 테마에서 눈금은 페이지 상단에만 표시됩니다. 나는 그 페이지의 중앙에 비슷한 것을하고 싶다. 불행히도 그 하나의 기능을 얻으려면 테마를 전환 할 수 없습니다. 그래서 나는 내 자신의 버전을 어떻게 만들 것인지 알고 싶었습니다. 누군가 올바른 방향으로 나를 가리킬 수 있습니까?

p.s. 그리드는 멋진 애니메이션을 가질 필요가 없으며 링크 할 필요조차 없습니다. 4x2의 그리드에서 그저 정적 인 그림 만. 이미지 사이에 간격이나 여백 또는 여백이 없습니다. 그리고 저는 그 테마의 디자이너에게 연락을했고, 그는 그것을하는 플러그인이 아니라고 말했습니다. 맞춤 CSS3입니다. 그는 더 이상 그 도움이되지 않았다 :/

Answer 1

나는 이미지를 포함하기 위해 순서가없는 목록을 사용하고, 목록 항목을 플로팅하고 25 % 너비를 적용합니다. 이미지는 100 % 너비, 최대 너비 100 % 및 높이 : 자동 레이아웃이 필요합니다. 업로드하는 이미지는 높이 치수가 동일해야합니다 (또는 목록 항목에 고정 높이를 설정할 수도 있지만 이미지 콘텐츠가 손실 될 수 있습니다).

ul#picture_grid { 

list-style: none; 
width: 100%; 
overflow: hidden; 

} 

#picture_grid li { 

float: left; 
width: 25%; 

} 

#picture_grid img { 

display: block; 
width: 100%; 
max-width: 100%; 
height: auto; 

}