CSS最佳方式流體柱佈局

我正在創建一個圍繞960像素12列網格佈局設計的網頁，其中每列寬度可達60px，每邊最多有10px的邊距。「最多」，因爲如果頁面縮小，列應該縮小。現在我無法使像素完美。CSS最佳方式流體柱佈局

我的「CSS」（實際上小於生成CSS）看起來像這樣

.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); 
    } 
}

現在，我已經創建了一個頁面，也就是寬12列在一排的一個元素。在第2行有1個元素，它是9列寬和1列3列。在第3行，每個3列寬4個元素。

下面是截圖。正如你所看到的，它們不是完美對齊的像素。我不明白爲什麼... Not pixel perfect

來源

2012-07-15 Anton Gildebrand

您的第一列和最後一列在所有行中都有適當的左右邊距設置嗎？ – AdityaSaxena 2012-07-15 18:51:14

我只是看了一下，實際上，邊距是9px而不是10px。這是爲什麼？保證金設置爲「保證金：1.0416666666666665％」，並且父div的寬度是960px – 2012-07-15 19:02:44

我這樣認爲。我們不能將其設置爲整數百分比嗎？ – AdityaSaxena 2012-07-15 19:25:01