0

原始问题：

好的，这是简单明了的 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/少：

.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来跟踪浮动和位置。我主要用作调整大小和动画助手。

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

如果窗口宽度不能被 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();    
}
4

1 回答 1

2

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

正如您所指出的，要获得宽度的四等分没有问题，您需要一个width可以被 4 整除的总数。要使用您使用的百分比获得高度划分，您需要一个width可以被 20 整除的总数（20 的 35% = 7，素数；1-19 之间没有其他值可以乘以 35% 而不会生成小数）。

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

因此，您的width值所需的理论计算需要使用模函数，如下所示：

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

或者

width - (width%20) //in javascript

但是，正如您所看到的，关键是您需要一个 CSS 本身不具备的动态操作来使其像素完美。

于 2013-12-10T15:56:47.833 回答