CSS最佳方式流体列布局

Question

我正在创建一个围绕960px 12列网格布局设计的网页，每列最大宽度为60px，每边的边距最多为10px。 “最多”因为如果页面缩小，列应缩小。现在我无法使像素完美。

我的“CSS”（实际上是生成CSS的LESS）看起来像这样

.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列，宽3列。 在第3行，每3列宽4个元素。

下面是截图。如您所见，它们不是像素完美对齐的。我不明白为什么......

Answer 1

我认为您的问题是由浏览器进行舍入的方式引起的。有时你得到一个额外的像素左右。有时你会错过一个像素左右。