2

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

#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 百分比不能正常工作，我该怎么做才能使其正确调整大小？

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

这是一个jsfiddle

编辑1：

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

4

2 回答 2

4

嗯，这是因为

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

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

如果您删除该行，它工作得很好，检查这个

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

更新：

运行了一个小脚本，这将使它与您当前的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百分比。

测试链接

于 2013-06-21T04:49:03.780 回答
1

这是因为你masonry plugin检查了这个

这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/

于 2013-06-21T04:54:27.063 回答