CSS 가장 좋은 방법 유체 열 레이아웃

나는 960px 12 열 그리드 레이아웃 주위에 설계된 웹 페이지를 만들고 있는데, 각 열은 최대 60px 넓이이고 각면에는 최대 10px의 여백이 있습니다. "최대"는 페이지가 축소되면 열이 축소되어야하기 때문입니다. 이제 픽셀을 완벽하게 만드는 데 어려움이 있습니다.CSS 가장 좋은 방법 유체 열 레이아웃

는

내 "CSS는"(CSS를 생성 실제로 이하) 내가 한 행에 12 개 컬럼 넓은 하나 개의 요소가있는 페이지를 만들었습니다 지금이

.column{ 
    position: relative; 
    float: left; 
    margin: 100%*(10/960); 
    &.c1{ 
     max-width: 60px; 
     width: 100%*(60/960); 
    } 
    &.c2{ 
     max-width: 140px; 
     width: 100%*(140/960); 
    } 
    &.c3{ 
     max-width: 220px; 
     width: 100%*(220/960); 
    } 
    &.c4{ 
     max-width: 300px; 
     width: 100%*(300/960); 
    } 
    &.c5{ 
     max-width: 380px; 
     width: 100%*(380/960); 
    } 
    &.c6{ 
     max-width: 460px; 
     width: 100%*(460/960); 
    } 
    &.c7{ 
     max-width: 540px; 
     width: 100%*(540/960); 
    } 
    &.c8{ 
     max-width: 620px; 
     width: 100%*(620/960); 
    } 
    &.c9{ 
     max-width: 700px; 
     width: 100%*(700/960); 
    } 
    &.c10{ 
     max-width: 780px; 
     width: 100%*(780/960); 
    } 

    &.c11{ 
     max-width: 860px; 
     width: 100%*(860/960); 
    } 
    &.c12{ 
     max-width: 940px; 
     width: 100%*(940/960); 
    } 
}

것 같습니다. 행 2에는 9 열 너비와 1 열 3 열이있는 요소가 있습니다. 행 3에 각 3 열 폭 4 개.

다음은 스크린 샷입니다. 보시다시피 픽셀은 완벽하게 정렬되지 않았습니다. 나는 이유를 이해할 수 없다 ... Not pixel perfect

출처

2012-07-15 Anton Gildebrand

첫 번째 및 마지막 열에는 모든 행에서 왼쪽 및 오른쪽 여백이 적절하게 설정되어 있습니까? – AdityaSaxena

방금 살펴 봤는데 실제로 여백은 10px 대신 9px입니다. 왜 그런가요? 여백은 "margin : 1.0416666666666665 %"로 설정되고 부모 div의 너비는 960px –

입니다. 전체 숫자로 설정할 수 없습니까? – AdityaSaxena