CSS 응답 격자 1px 간격 문제

Question

프로젝트의 반응 형 그리드 시스템에서 작업하고 있습니다. 격자는 왼쪽으로 떠있는 블록으로 구성되며 너비이 25 %입니다. * 또는 50 % * 높이/폭 * * 높이/폭 중 100 %로 설정되는 화상이 블록 내부

가있다.

블록 내의 모든 이미지는 서로 인접 해 있으며 모든 블록은 서로 인접 해있어 이미지의 완벽한 격자처럼 보입니다.

특정 브라우저 크기에서 문제가 발생하거나 브라우저 크기를 조정할 때 특정 블록 사이에 약간의 1px 간격이 생깁니다.

예

여기에서 볼 수있다 : http://dahliacreative.com/responsivegrid/

나는 당신이 모두 잘 보인다 플로트를 벗어 것처럼 떠있는 블록으로 다운되었을 수 있습니다 생각합니다. display: inline-block 등을 사용해 보았지만 아무런 효과가 없었습니다!

누구나 해결할 생각이 있습니까?

Answer 1

이는 너비와 높이가 일정한 경우 (예 : 561px * 393px) 전체 원형 비율이 50 % 인 경우 발생합니다. 그런 다음 50 %로 균등하게 나눠 지므로 나머지 1px 간격으로 나눕니다.

트위터 부트 스트랩 CSS를 살펴보고이 문제를 방지하기 위해 소수점 이하 6 자리까지 백분율을 확인하십시오.

Answer 2

새 css3을 열 간격과 열 개수와 함께 사용할 수 있습니다.

column-count: 
column-gap: 

Chris는 당신과 관련된 이미지로 정말 좋은 예를 만들었습니다. 당신은 접두사를 사용해야합니다 리 또는 테이블 정도 요소와 거의 같은 일을 할 수 있으며, 마지막으로 CSS 클래스를 추가하여보다 10

http://css-tricks.com/seamless-responsive-photo-grid/

Answer 3

내가 그것을 수정 IE에서 작동하지 않습니다 열,이 클래스에 대한 CSS

.your_class_for_last_column { float: left !important;} 
/* TO FIX 1px Foundation 5 bug fix*/