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

EDIT1：

所以很明显，根据到目前为止的答案，这是一个问题与我想做的事冲突的砌筑给它的元素的绝对定位。所以这将被固定的方式是一些JavaScript/jQuery的行，可以根据正确的百分比重新窗口调整大小的边缘...我怎么能做到这一点？

Answer 1

嗯，这是因为

position: absolute;财产得到由砖石设置。

是绝对定位取出流动的，因此 放置其他元素

时，如果你删除了这一行不占用空间，只是正常的元素，检查this

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

UPDATE：

有一个小的脚本来运行，这将使这项工作与当前的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/