Question

我有很多div漂浮在左边。当浏览器调整大小时，它们会根据线路上的数量向下或向上移动。我想知道是否有一种方法可以动态地（使用css）让那些div在某种程度上对齐（或有边距），它们总是通过调整大小来填充整个屏幕空间？换句话说，在调整浏览器大小时，它们之间的边距会调整大小，但是一旦另一个div适合它，它将被添加到行中，或者如果达到最小边距并且传递另一个div则转到下一行，而边距再次扩展。这是一个如何现在的例子，调整wondow的大小，看看他剩下的空间，我想“填补”

<html>
<head>
<style>
.test {
float:left;
width: 100px; 
height:100px;
background-color: grey;
margin: 0 10px 10px 0;
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</body>
</html>

Answer 1

我已经看过几次这个问题了，结果似乎总是css不支持（还）支持动态宽度的元素分布。有黑客，但老实说，我相信最快的方法是使用javascript进行定位。

这样的东西（写在prototype库中）应该做你想做的事情：

$(document).observe('dom:loaded',function(){
    spaceSquares();
});
window.onresize = function(){spaceSquares();}
function spaceSquares(){
    // this is the minimum margin per square.
    var minMargin = 20;
    // this tells you how many squares will fit on the top row
    var topRowSquares = Math.floor(document.viewport.getWidth() / ($$('.test')[0].getWidth()+minMargin));
    // this will tell you how much space is left over
    var remainderWidth = document.viewport.getWidth() - (($$('.test')[0].getWidth()+minMargin)*topRowSquares);
    // this will tell you how much margin to put on each item
    var marginWidth = (remainderWidth / topRowSquares) + minMargin;
    // this will put the margin on the top row
    for(var i=0;i<topRowSquares;i++){
        $$('.test')[i].setStyle({'margin-left':marginWidth/2+'px','margin-right':marginWidth/2+'px'});
    }
}

我确信有更优雅的方法可以做到这一点，但基本上我只是计算剩余的空间并将其分成正方形。我已经在观察者中对函数进行了第一次调用，以便在加载dom之前不会尝试触发，我在window.onresize事件上调用它，这样如果你调整窗口的大小，它就会将始终保持顶行完美分布。

希望这会让你朝着正确的方向前进！

左浮动div之间的动态余量（或边际模拟）

1 个答案: