0

我正在创建一个围绕 960 像素 12 列网格布局设计的网页，其中每列的宽度最大为 60 像素，每侧的边距最多为 10 像素。“最多”，因为如果页面缩小，列应该缩小。现在我很难让它像素完美。

我的“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 行，4 个元素，每 3 列宽。

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

4

1 回答 1

0

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

于 2013-01-31T16:40:29.903 回答