如何使用CSS中的动态列和行计数均匀分布浮动元素？

Question

我有多个具有固定宽度和高度的div(想想某种带有文章图片的目录视图).现在我想向他们展示类似于float:left的行为.这样可以确保浏览器窗口越大,一行中显示的div就越多.

浮动的缺点:左边的解决方案是,右侧有一个很大的白色间隙,直到另一个div适合.现在我的工作是在页面上均匀地分配div,而不是右侧的大白色间隙,单个div之间应该有均匀分布的间隙.

JavaScript中的解决方案很简单:http://dl.dropbox.com/u/2719942/css/columns.html

您可以看到,如果您调整浏览器窗口的大小,它的行为类似于float:left,但空间均匀分布在框之间.使用JavaScript动态计算列数和行数:

  function updateLayout() {
    var boxes = document.getElementsByClassName('box');
    var boxWidth = boxes[0].clientWidth;
    var boxHeight = boxes[0].clientHeight;
    var parentWidth = boxes[0].parentElement.clientWidth;

    // Calculate how many boxes can fit into one row
    var columns = Math.floor(parentWidth / boxWidth);

    // Calculate the space to distribute the boxes evenly
    var space = (parentWidth - (boxWidth * columns)) / columns;

    // Now let's reorder the boxes to their new positions
    var col = 0;
    var row = 0;
    for (var i = 0; i < boxes.length; i++) {
      boxes[i].style.left = (col * (boxWidth + space)) + "px";
      boxes[i].style.top = (row * boxHeight) + "px";

      if (++col >= columns) {
        col = 0;
        row++;
      }
    }
  }

现在我想知道是否有没有JavaScript的解决方案？我更喜欢只有CSS的解决方案,因为我在一个页面上可能有多达数百个div.

我查看了CSS3 Flexible Box Layout,但这似乎只适用于固定列布局.在我的示例中,列计数是动态计算的.然后我尝试了CSS3多列布局,我可以得到类似的工作,但div垂直对齐,内部切断,浏览器支持还没有.这似乎对文本更有用,但在我的情况下,我修复了带图片的div,不应该被切断.

所以我的问题是:我可以在没有JavaScript的情况下实现这样的事情吗？

Answer 1

在最接近纯CSS的解决方案是基于text-align: justify.

以下是我的两个答案,显示了该技术:

• 流体宽度等间距DIV
• 如何使用CSS在柔性宽度设计中设置自动边距框？

这是使用HTML/CSS的演示:http://jsfiddle.net/thirtydot/5CJ5e/(或全屏)

如果与其他行相比存在不同数量的框,则JavaScript和此CSS处理最后一行的方式会有所不同.

你的JavaScript做到了这一点:

我的CSS做到了这一点:

如果CSS在最后一行上使用不同数量的框执行的操作是不可接受的,则可以添加一些额外的不可见框来完成该行:

http://jsfiddle.net/thirtydot/5CJ5e/1/(或全屏)

这样做的问题是隐形框增加了包含元素的高度.如果这是一个问题,我想不出一种方法来修复它而不使用一点JavaScript:

http://jsfiddle.net/thirtydot/5CJ5e/2/(或全屏)

当然,既然现在正在使用JavaScript,那么您最好使用它来添加不可见的框(而不是隐藏HTML):

http://jsfiddle.net/thirtydot/5CJ5e/5/(或全屏)

_{(我还在早期版本中写了一个更复杂的JavaScript修复程序,然后才提出隐形框的想法.现在应该没有理由使用我的旧修复程序了.)}

Answer 2

您需要使用Javascript来执行此操作.

但只需调整框类即可立即调整所有框的边距.

// Calculate how many boxes can fit into one row
var columns = Math.floor(parentWidth / boxWidth);

// Calculate the space to distribute the boxes evenly
var space = (parentWidth - (boxWidth * columns)) / columns;

$('.boxClass').css('margin', space / 2);

-

示例:http://jsfiddle.net/VLr45/1/