浮动css百分比，全幅浏览

Question

原始问题：

好的，这是简单明了的css。但我的网站上有一个bug，我无法将其清除！

我用这个设计制作了一个网站：http://cl.ly/image/1j231y2x3w07

该网站我完全响应并利用css纵横比技术：

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%;}

你明白了。

我还使用了优秀的插件Packer.js来跟踪浮动和位置。我主要使用is作为调整大小和动画辅助对象。

但是，反应充分给了我一个问题。例如，当浏览器窗口宽度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。要获得使用百分比的高度划分，您需要一个可被20整除的总width（20的35%=7，一个素数；1-19之间没有其他值可以在不生成分数的情况下乘以35%）。

因此，这意味着你需要的宽度不是为100%窗口宽度拍摄，而是为下一个最小的除以20的宽度值拍摄（然后可能将你的显示器居中，这样剩下的0到9.5像素就可以通过margin: 0 auto规则变成侧边距）。

因此，width值的理论计算需要使用模函数，类似于这样的函数：

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

或

width - (width%20) //in javascript

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