javascript - css 大小和边距以及百分比

Question

所以我想创建一个始终充满整个屏幕且布局良好的页面。使用以下代码效果很好:

#posts{
    width:100%;
    height:auto;
    background:#666;
}
.entry{
    float:left;
    margin-left: 4%;
    margin-top:10px;
    margin-bottom: 10px;
    width:20%;
    height:100px;
    background:#000;
}

有一个问题...它在调整窗口大小时中断。我只是好奇为什么当窗口调整大小时它不起作用，因为由于边距和大小是用百分比完成的，它们应该更改为正确的，对吗？

我的问题是:

为什么当查看器调整窗口大小时 css 百分比无法正常工作，我该怎么做才能使其正确调整大小？

请记住在加载后调整窗口大小，以实际看到我正在谈论的问题。

Here is a jsfiddle

编辑1:

很明显，根据到目前为止的答案，这是一个我想要做的事情与砌体相冲突的问题，赋予它的元素绝对定位。因此，解决此问题的方法是使用一些 javascript/jquery 行，可以根据正确的百分比重做窗口调整大小时的边距...我该怎么做？

Answer 1

嗯，这是因为

position:absolute; 属性由砌体设置。

An element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements

如果删除该行，它就可以正常工作，请检查 this

如果所有元素都具有相同的宽度和高度，通常您不需要砌体。

更新:

运行了一个小脚本，这将使该脚本与您当前的 html 实现一起工作。

$(".entry").each(function(){
    var $this = $(this)
    var currLeft = 0;
    var containerWidth = 0;
    var newLeft = 0;

    currLeft = parseInt($this[0].style.left, 10);
    containerWidth = parseInt($("#posts").width(), 10);

    newLeft = currLeft/containerWidth * 100;

    $this.css({
        "left": newLeft + "%"
    })
});

因此，脚本所做的是以像素为单位的 currLeft 并计算以百分比为单位的 newLeft。

Test Link