原始问题：

Question

原始问题：

好的，这是简单明了的CSS。但我的网站上有一个错误，我无法解决它！

我使用此设计制作网站：http://cl.ly/image/1j231y2x3w07

网站我完全响应并使用了css-aspect-ratio-technique：

HTML：

<div class="post small">Post that is small</div>
<div class="post big">Post that is big</div>
<div class="post tall">Post that is tall</div>
<div class="post wide">Post that is wide</div>

CSS / LESS：

.post {position: relative;}
.post:after {display: block; content: '';}

.post.small {width: calc(1/4 * 100%);}
.post.small:after {padding-top: 70%;}

.post.big {width: calc(1/2 * 100%);}
.post.big:after {padding-top: 70%;}

.post.tall {width: calc(1/4 * 100%);}
.post.tall:after {padding-top: 140%;}

.post.wide {width: calc(1/2 * 100%);}
.post.wide:after {padding-top: 35%;}

你得到了它的要点。

我还利用优秀的插件Packery.js来跟踪浮动和位置。我主要使用的是调整大小和动画助手。

但是完全响应会给我一个问题。例如，当浏览器窗口 1304px 宽时，由于上述技术，我得到一些奇数高度值（例如477.4px）。由于奇怪的数字，我无法保持我的网格，更不用说我的设计。

如果窗口宽度不能被4整除，我会得到重叠或1像素的白线。

我已经做了很长一段时间了，需要一些新鲜的眼睛。所以，如果有人得到解决方案的投入，我将非常高兴。谢谢： - ）

解决方案：

非常感谢@ScottS - 很棒的建议！

function frontpageResize() {
    // container ... duh.
    var container = $('#frontpage-wrapper');
    // body width.
    var bWidth = window.innerWidth;
    // get the pixels missing for making bWidth divisible by 20.
    var divisibleBy =  bWidth % 20; 
    // setting an alternative width.    
    var altWidth = Math.ceil(bWidth - divisibleBy + 20);
    // what's missing?
    var leftover = altWidth - bWidth;

    // if body width is divisible by 20 all is peaches?     
    if(divisibleBy === 0) {
        container.width(bWidth);
    } else {
        // else set the alternative width as body width and set margin-left.
        container.width(altWidth).css({ "margin-left" : -leftover / 2 + "px"}); 
    }
    // relayout Packery.js
    container.packery();    
}

Answer 1

您将消除所有舍入问题的唯一方法

要获得宽度的四分区而没有问题，正如您所指出的那样，您需要一个可被4整除的总width。要获得您正在使用的百分比的高度分割，您需要总{{1}可以被20整除（20 = 35的一半= 7，一个素数; 1-19之间没有其他值可以乘以35％而不生成一个分数。）

这意味着你需要你的宽度不能拍摄width窗口宽度，而是宽度值是下一个最小的除法值20（然后可能将显示器居中，这样0到9.5px遗留下来通过100%规则成为边缘。

因此，您对margin: 0 auto值所需的理论计算需要使用模数函数，如下所示：

width

或

@width - mod(@width, 20) //in LESS

正如您所看到的那样，重点是您需要一个CSS本身没有的动态动作来使其像素完美。

浮动css百分比，全宽度浏览

原始问题：

解决方案：

1 个答案:

您将消除所有舍入问题的唯一方法