Here is a jsfiddle

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

EDIT1：

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

Answer 1

嗯，这是因为

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

绝对定位的元素从流中取出放置其他元素时不占用空间

如果删除该行，它就可以正常工作，请检查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

Answer 2

这是因为您masonry plugin支票this

此plugin会自动应用position和left top positions

删除属性后，它将正常工作。

<强>更新

更改您的代码，如

<强> HTML

<div id="posts">
    <div class="entry-content"><div class="entry"></div></div>
    <div class="entry-content"><div class="entry"></div></div>
    <div class="entry-content"><div class="entry"></div></div>
    <div class="entry-content"><div class="entry"></div></div>
    <div class="entry-content"><div class="entry"></div></div>
    <div class="entry-content"><div class="entry"></div></div>
    <div class="entry-content"><div class="entry"></div></div>
    <div class="entry-content"><div class="entry"></div></div>
    <div style="clear:both"></div>
</div>

<强> CSS

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

小提琴 http://jsfiddle.net/Zpbsn/10/

css大小和边距百分比

Here is a jsfiddle

2 个答案: