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/