1140px 격자 맞춤 문제

Question

안녕하세요 갤러리 스타일 사이트를 만들고 960px가이 프로젝트에 너무 작다고 생각하여 cssgrid.net에서 1140px 격자를 사용하는 데 매우 관심이 있습니다.

첫 번째 행에 4 개의 열이 각각 3 개 있고 나머지 행에 각각 3 개의 열이 4 개 이미지가 있습니다.

일단 문제가 발생하면 두 행의 오른쪽 가장자리가 정렬되지 않으며 분명히 갤러리가 잘 보이지 않게됩니다. 나는이 그리드의 백분율로 작성된 열로 인해 반올림 됨으로 인해 발생한다는 것을 알고 있습니다. 그러나 그것은 여전히 ​​나빠 보이고 어떤 방법으로 정렬되도록하고 싶습니다. 이것에 대한 해결책은 무엇입니까?

는 는

여기에 인덱스 페이지에 대한 나의 코드 : http://pastebin.com/c76U7J5g

당신은 내가 무슨 일이 일어나고 있는지 이해하면 cssgrid.net 그리드

Answer 1

을 다운로드해야 이런 일이 보려면, 그것은에 나타납니다 단순한 실수 야.

자리 표시 자 이미지 (고양이)가 너무 작습니다. 이 그리드 시스템에서 자리 표시 자 이미지를 사용하면 자리 표시자를 원하는 크기를 선언해야하기 때문에 까다로울 수 있습니다. 현실에서는 라이브 페이지에서 그리드 시스템을 손상시킬 수 있으므로 이미지의 디미션이 지정되지 않습니다 (그리드는 이미지를 사용자가 입력 한 열에 맞는 가장 큰 크기로 축소합니다).

길게 이야기하자면 자리 표시 자 이미지가 너무 작습니다! 전체 크기로 그리드 지점을 채우지 않으므로 설명하는 이상한 위치가됩니다. 즉, 나는 항상 1000px 이상의 자리 표시자를 배치하여 적절하게 스케일을 줄일 수 있습니다.

편집 :

시도는 재단이하는 일을 :

.last { 
float: right; 
} 

는 스타일 시트가 추가 - 그것은 마지막 컬럼의 오른쪽 가장자리를 정렬해야합니다.

Answer 2

퍼센트 기반 레이아웃은 픽셀 완벽하지 않습니다. 내 프로젝트 중 하나에서 CSS 프레임 워크 http://www.1140px.com/을 사용했으며 만족했습니다. 픽셀 완벽한 레이아웃을 원할 경우 사용해 볼 수 있습니다.