左浮动 div 之间的动态边距（或边距模拟）

发布于 2024-10-09 09:17:22 字数 926 浏览 0 评论 0原文

我有许多 div 向左浮动。当浏览器调整大小时，它们会根据该行可以容纳的数量向下或向上移动。我想知道是否有一种方法可以动态地（使用 css）让这些 div 以某种方式对齐（或有边距），使它们始终通过调整 marhin 大小来填充整个屏幕空间？换句话说，当浏览器调整大小时，它们之间的边距会调整大小，但一旦另一个 div 适合，它就会被添加到该行中，或者如果达到最小边距并通过，另一个 div 会进入下一行，同时边距再次扩展。这是现在的示例，调整窗口大小以查看我想要“填充”的剩余空间

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

原文

I have a number of divs floated left. When browser is resized they move down or up based on how many can fit on the line. I was wondering if there is a way to dynamically (with css) have those divs align (or have margin) in a way, that they would always fill the entire screen space by having their marhin resize? In other words margin between them would resize while browser is resized, but as soon as another div can fit it will be added in the line, or if minimum margin is reached and passed another div goes to next line while margins expand again. Here's an example how it is now, resize the wondow to see he leftover space that I want to "fill"

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

回心转意 2024-10-16 09:17:22

我已经见过这个问题几次了，结果似乎总是 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 事件上调用它，这样如果您调整窗口大小，它将始终保持顶行完美分布。

希望这能让您朝着正确的方向前进！

I've seen this question a few times, and the result always seems to be that css doesn't (yet) support distribution of elements across a dynamic width. There are hacks out there, but honestly I believe the quickest way around this would be to use javascript for the positioning.

something like this (written in the prototype library) should do what you want:

$(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'});
    }
}

I'm sure there's more elegant ways to do it, but essentially I'm just calculating the remaining space and dividing it between the squares. I've wrapped the first call to the function in an observer so that it won't try to fire before the dom is loaded, and I'm calling it on the window.onresize event, so that if you resize the window, it will always keep the top row perfectly distributed.

Hopefully that will get you headed in the right direction!

回复收藏 0 原文

~没有更多了~