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