css - 以 css 百分比 float ，全 Angular 浏览

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/更少:

.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跟踪 float 和位置。我主要使用 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。要使用您使用的百分比获得高度划分，您需要一个总width 可以被 20 整除(20 的 35% = 7，一个素数；1-19 之间没有其他值可以乘以 35% 而不会生成分数)。

所以这意味着您需要您的宽度不是针对 100% 窗口宽度，而是作为下一个最小除以 20 的宽度值(然后可能将您的显示居中，以便通过 margin: 0 auto 规则，剩下的 0 到 9.5px 成为侧边距。

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

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

或

width - (width%20) //in javascript

不过，如您所见，关键是您需要 CSS 本身不具备的动态操作，以使其像素完美。