如何在CSS中动态列和行计数均匀分布浮动元素？ [英] How to distribute floated elements evenly with a dynamic column and row count in CSS?

问题描述

我有多个div具有固定的宽度和高度（考虑某种目录视图与文章图片）。现在我想要显示它们类似于float：left的行为。这可以确保您的浏览器窗口越大，一行中显示的div就越多。

float：left解决方案的缺点是，间隙在右边，直到另一个div将适合。现在我的工作是均匀分布divs一页，而不是一个大的白色间隙在右侧，应该在单个div之间均匀分布的差距。

JavaScript中的解决方案很简单：（或全屏 a>）

这样做的问题是，不可见框增加了包含元素的高度。如果这是一个问题，我不能想办法解决它，而不使用一点JavaScript：

http://jsfiddle.net/thirtydot/5CJ5e/2/ （或全屏）

当然，由于JavaScript现在正在使用，它会首先添加不可见的框（而不是玷污HTML）：

http://jsfiddle.net/thirtydot/5CJ5e/5/ （或全屏）

_{（我还写了一个更复杂的JavaScript修复在早期的修订，在隐形箱的想法带给我之前，没有理由使用我的旧立即修复。）}

I have multiple divs with a fixed width and height (think about some sort of catalog view with article pictures). Now I want to show them similar to the behavior of float:left. This ensures that the larger your browser window is, the more divs are shown in one row.

The downside of the float:left solution is, that there is a big white gap on the right side, until another div will fit. Now I have the job to distribute the divs evenly one the page, and instead of a big white gap on the right side, there should be evenly distributed gaps between the single divs.

A solution in JavaScript is easy: http://dl.dropbox.com/u/2719942/css/columns.html

You can see, if you resize the browser window, it behaves similar to float:left, but the space is evenly distributed between the boxes. The column and row count is dynamically calculated with 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++;
      }
    }
  }

Now I wonder if there is a solution without JavaScript? I would prefer a CSS-only solution, because I will have possibly up to hundreds of divs on one page.

I looked into CSS3 Flexible Box Layout, but this seems to be only useful for fixed column layouts. In my example, the column count gets calculated dynamically. Then I tried CSS3 Multi-column Layout, which I could get something similar working, but the divs are aligned vertically, cut off in the inside, and the browser support isn't there yet. This seems more useful for text, but in my case I have fixed divs with pictures, that shouldn't get cut off.

So my question is: can I realize something like this without JavaScript?

解决方案

The closest pure CSS solution is based on text-align: justify.

Here are two of my answers showing the technique:

• Fluid width with equally spaced DIVs
• How to set auto-margin boxes in flexible-width design using CSS?

Here's a demo using your HTML/CSS: http://jsfiddle.net/thirtydot/5CJ5e/ (or fullscreen)

There's a difference in the way your JavaScript and this CSS handles the last row if there's a different number of boxes compared to the other rows.

Your JavaScript does this:

My CSS does this:

If what the CSS does with a different number of boxes on the last row is unacceptable, you could add some extra invisible boxes to complete the row:

http://jsfiddle.net/thirtydot/5CJ5e/1/ (or fullscreen)

Doing this has the issue that the invisible boxes increase the height of the containing element. If this is a problem, I can't think of a way to fix it without using a little JavaScript:

http://jsfiddle.net/thirtydot/5CJ5e/2/ (or fullscreen)

Of course, since JavaScript is now being used, you might as well use it to add the invisible boxes in the first place (instead of sullying the HTML):

http://jsfiddle.net/thirtydot/5CJ5e/5/ (or fullscreen)

_{(I also wrote a more complicated JavaScript fix for this in an earlier revision, before the idea of invisible boxes was brought to me. There should be no reason to use my old fix now.)}

这篇关于如何在CSS中动态列和行计数均匀分布浮动元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！