1

我正在尝试使用浮点数(每行 3 个)创建照片库网格布局,图像缩略图似乎在 Firefox 和 IE 中很好地对齐,但在 Chrome 上右侧有 1 个像素的边距,有什么办法可以修复此行为?

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
.wrap{
    width:900px;
    background:red;
    margin:0 auto;
    overflow:hidden;
}

.wrap div{
    float:left;
    width:295px;
    height:200px;
    background:#333;
    margin-bottom:5px;
    margin-right:0.469em;
    overflow:hidden;
}

.wrap div:nth-child(3n+3){ /* wont work in IE8 */
    margin-right:0;
}

.clear:before, .clear:after{ content:""; display:table; }
.clear:after{ clear:both; }
        </style>
    </head>
    <body>
        <div class="wrap clear">
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div style="margin-right:0;">&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div style="margin-right:0;">&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div style="margin-right:0;">&nbsp;</div>
        </div>​
    </body>
</html>
4

1 回答 1

0

不会出现在最新版本的 Chrome(当前为 23.0.1271.64 m - Windows)中,可能是一个舍入错误。

于 2012-11-22T09:06:34.467 回答